i need to write a search screen. first it shows all posts from my both collections now it doesnt show any results
import { Pressable, Text, TextInput, View, Image, TouchableOpacity, Modal } from 'react-native';
import { gStyle } from '../styles/style';
import { Feather } from '@expo/vector-icons';
import React, { useState, useEffect } from 'react';
import { useNavigation } from '@react-navigation/native';
import { firebase } from '../Firebase/firebase';
import 'firebase/compat/auth';
import 'firebase/compat/database';
import 'firebase/compat/firestore';

export default function Header() {
    const [searchTerm, setSearchTerm] = useState('');

    const [searchResult, setSearchResult]= useState('');

    const handleSearch = async ()=>{
        const futureMKSnapshot = await firebase
            .firestore()
            .collection('FutureMK')
            .where('name','>=',searchTerm)
            .where('name','<=',searchTerm + '\uf8ff')
            .get();

        const pastMKSnapshot = await firebase
            .firestore()
            .collection('PastMK')
            .where('name','>=',searchTerm)
            .where('name','<=',searchTerm + '\uf8ff')
            .get();

        const futureMKData = futureMKSnapshot.docs.map(doc => ({ 
            id: doc.id, 
            ...doc.data(), 
        }));

        const pastMKData = pastMKSnapshot.docs.map(doc => ({ 
            id: doc.id, 
            ...doc.data(), 
        }));

        const results = [...futureMKData, ...pastMKData].filter(item=>
            item.name.toLowerCase().includes(searchTerm.toLowerCase()));
        setSearchResult(results);
        navigation.navigate('Search', { results });
    };

    const [userAuthenticated, setUserAuthenticated] = useState(false);

    const [isModalVisible, setIsModalVisible] = useState(false);

    const showModal = () => {
    setIsModalVisible(true);
    };

    const hideModal = () => {
    setIsModalVisible(false);
    };
    
    const navigation = useNavigation();

    useEffect(() => {
        const unsubscribe = firebase.auth().onAuthStateChanged(user => {
        if (user) {
        setUserAuthenticated(true);
        } else {
        setUserAuthenticated(false);
        }
        });
        
        return unsubscribe;
        }, []);
    return (
            <View style={gStyle.main}>
                <View style={gStyle.headerContainer}>
                    <Image
                    source={require('../assets/logo.png')}
                    style={gStyle.logoImg}
                    />
                    <View style={gStyle.menu}>
                        <TouchableOpacity onPress={showModal}>
                            <Text style={gStyle.menuRedLine}></Text>
                            <Text style={gStyle.menuRedLine}></Text>
                            <Text style={gStyle.menuRedLine}></Text>
                            <Modal visible={isModalVisible} animationType='fade' transparent={true}>
                                <View style={gStyle.modal}>
                                    <TouchableOpacity onPress={hideModal}>
                                        <Text style={gStyle.close}>Х</Text>
                                    </TouchableOpacity>
                                    <TouchableOpacity 
                                    onPress={()=>navigation.navigate('Home')}
                                    >
                                        <Text style={gStyle.menuItem}>Главная</Text>
                                    </TouchableOpacity>
                                    <TouchableOpacity 
                                    onPress={()=>navigation.navigate('AllFutureMK')}
                                    >
                                        <Text style={gStyle.menuItem}>Будущие мастер-классы</Text>
                                    </TouchableOpacity>
                                    <TouchableOpacity 
                                    onPress={()=>navigation.navigate('AllPastMK')}
                                    >
                                        <Text style={gStyle.menuItem}>Архив мастер-классов</Text>
                                    </TouchableOpacity>
                                    <TouchableOpacity 
                                    onPress={()=>navigation.navigate('Sales')}
                                    >
                                        
                                        <Text style={gStyle.menuItem}>Скидки</Text>
                                    </TouchableOpacity>
                                    {userAuthenticated ?
                                    <TouchableOpacity 
                                    onPress={()=>navigation.navigate('Profile')}
                                    >
                                        <Text style={gStyle.menuItem}>Личный кабинет</Text>
                                    </TouchableOpacity>
                                    :
                                    <TouchableOpacity 
                                    onPress={()=>navigation.navigate('Auth')}
                                    >
                                        <Text style={gStyle.menuItem}>Личный кабинет</Text>
                                    </TouchableOpacity>
                                    }
                                </View>
                            </Modal>
                        </TouchableOpacity>
                    </View>
                </View>
                    <View style={gStyle.searchBox}>
                        <TextInput style={gStyle.search} 
                        placeholder="Поиск" 
                        onChangeText={(text)=>setSearchTerm(text)}
                        />
                            <View style={gStyle.boxBtn}>
                                <Pressable style={gStyle.searchBtn}
                                onPress={handleSearch}
                                >
                                    <Feather name="search" size={25} color="white" />
                                </Pressable>
                            </View>
                    </View>
            </View>
    );
  }

here is my collections
FutureMK
import { Text, View, Image, Pressable } from ‘react-native’;
import { gStyle } from ‘…/styles/style’;
import React, {useState, useEffect} from ‘react’;
import { useNavigation } from ‘@react-navigation/native’;
import {firebase} from ‘…/Firebase/firebase’;
import moment from ‘moment’;
import ‘firebase/compat/storage’;
import ‘firebase/compat/firestore’;


export default function FutureMK({limit}) {
const navigation = useNavigation();
const [futureMKData, setFutureMKData] = useState([]);

useEffect(() => {
const fetchData = async () => {
try {
let futureMKRef=firebase.firestore().collection(‘FutureMK’).orderBy(‘time’, ‘desc’);
if (limit){
futureMKRef=futureMKRef.limit(limit);
}
const snapshot = await futureMKRef.get();
const data = snapshot.docs.map((doc) => ({id:doc.id, … doc.data()}));
const storage=firebase.storage();
const updatedData = await Promise.all(data.map(async(mkData)=>{
const imagePath = mkData.image;
const imageRef = storage.ref().child(imagePath);
const url = await imageRef.getDownloadURL();
return {…mkData, image:url};
}))
setFutureMKData(updatedData);
} catch (error) {
console.log(‘Error:’,error);
console.log(‘futureMKData:’, futureMKData);
console.log(‘mkData:’, mkData);
}
};

fetchData();
}, [limit]);
return (
<View style={gStyle.main}>
{futureMKData.map((mkData)=>(
<View key={mkData.id} style={gStyle.mainFMK}>
<Text style={gStyle.dateFutureMK}>{new Intl.DateTimeFormat(‘ru-RU’,{
day:‘numeric’,
month:‘long’,
year:‘numeric’,
hour:‘numeric’,
minute:‘numeric’,
hour12:false
}).format(mkData.time.toDate())}</Text>
<View style={gStyle.FutureMKimg}>
<Image source={{uri:mkData.image}} style={gStyle.FutureMKbannerImg}/>
<Text style={gStyle.FutureMKnameOfMK}>{mkData.name}</Text>
<Text style={gStyle.hr}></Text>
</View>
<Text style={gStyle.FutureMKprice}>Цена: <Text style={gStyle.FutureMKrub}>{mkData.price} P.</Text></Text>
<Text style={gStyle.FutureMKdescription}>
{mkData.description.length>100
? mkData.description.substring(0,300)+‘…’
: mkData.description}
</Text>
<Pressable style={gStyle.FutureMKmoreDetails}
onPress={()=>{navigation.navigate(‘SignUpForMK’,{mkData});}}
>
<Text style={gStyle.FutureMKbtnTxt}>Подробнее</Text>
</Pressable>
<Text style={gStyle.FutureMKline}></Text>
</View>
))}

</View>
);
}

PastMK
import { Text, View, Image, Pressable } from ‘react-native’;
import { gStyle } from ‘…/styles/style’;
import { useNavigation } from ‘@react-navigation/native’;
import {firebase} from ‘…/Firebase/firebase’;
import ‘firebase/compat/storage’;
import ‘firebase/compat/firestore’;
import React, {useState, useEffect} from ‘react’;

export default function PastMK({limit}) {
const navigation = useNavigation();
const [pastMKData, setPastMKData]=useState([]);
useEffect(()=>{
const fetchData=async()=>{
try{
let pastMKRef=firebase.firestore().collection(‘PastMK’).orderBy(‘time’,‘desc’);
if(limit){
pastMKRef=pastMKRef.limit(limit);
}
const snapshot=await pastMKRef.get();
const data = snapshot.docs.map((doc)=>({id: doc.id, … doc.data()}));
const storage=firebase.storage();
const updatedData=await Promise.all(
data.map(async (mkData)=>{
const imagePath = mkData.image;
const imageRef = storage.ref().child(imagePath);
const url = await imageRef.getDownloadURL();
return {… mkData, image:url};
}),
);
setPastMKData(updatedData);
}catch (error){
console.log(‘Error:’, error);
}
};
fetchData();
},[limit]);
return (
<View style={gStyle.main}>
{pastMKData.map((mkData)=>(
<View key={mkData.id} style={gStyle.PastMKbox}>
<View style={gStyle.PastMKcontainer}>
<View style={gStyle.PastMKbox1}>
<View style={gStyle.PastMKpastImg}>
<Image
source={{uri: mkData.image}}
style={gStyle.PastMKimg}
/>
<View style={gStyle.PastMKinfo}>
<Text style={gStyle.PastMKnameOfMK}>{mkData.name}</Text>
<Text style={gStyle.PastMKdateOfMK}>{new Intl.DateTimeFormat(‘ru-RU’,{
day:‘numeric’,
month:‘long’,
year:‘numeric’
}).format(mkData.time.toDate())}</Text>
</View>
</View>
<Text style={gStyle.PastMKdescription}>
{mkData.description.length > 100
? mkData.description.substring(0, 300) + ‘…’
: mkData.description}
</Text>
<Pressable style={gStyle.PastMKreadMore}
onPress={()=>navigation.navigate(‘PastMKInfo’,{mkData})}>
<Text style={gStyle.PastMKtxtBtn}>Читать далее</Text>
</Pressable>
</View>
</View>
<Text style={gStyle.PastMKline}></Text>
</View>
))}


</View>
);
}

its my component of result
import { Text, View, Image, Pressable } from ‘react-native’;
import { gStyle } from ‘…/styles/style’;
import React from ‘react’;


export default function Result({ item }) {

return (
<View style={[gStyle.bookedMK, {flex:1}]}>
<View style={{ flexDirection: ‘column’ }}>
<View style={gStyle.ProfileDetails}>
<Image source={{uri:item.image}} style={gStyle.ProfileImg}/>
<View style={gStyle.ProfileDescription}>
<Text style={gStyle.ProfileTitleOfMK}>{item.name}</Text>
<Text>
{item.description.length > 100
? item.description.substring(0, 100)+‘…’
: item.description
}
</Text>
</View>
</View>
</View>
<Pressable
style={gStyle.deletebtn}
>
<Text>Читать далее</Text>
</Pressable>
<Text style={gStyle.ProfileLine}></Text>
</View>

);
}

its the search screen
import { Text, View, TextInput, Pressable, ScrollView, Alert, TouchableHighlight, TouchableOpacity, Image } from ‘react-native’;
import { gStyle } from ‘…/styles/style’;
import Header from ‘…/components/Header’;
import Footer from ‘…/components/Footer’;
import { useNavigation, useRoute } from ‘@react-navigation/native’;
import { firebase } from ‘…/Firebase/firebase’;
import ‘firebase/compat/auth’;
import ‘firebase/compat/database’;
import ‘firebase/compat/firestore’;
import React, {useState} from ‘react’;
import Result from ‘…/components/Result’;

export default function Search() {
const navigation = useNavigation();
const route = useRoute();
const results = route.params?.results || [];

return (
<View>
<ScrollView>
<Header/>
<View style={gStyle.main}>
<Text style={gStyle.header}>Результаты поиска</Text>
<View style={[gStyle.bookedMK, {flex:1}]}>
<View style={{ flexDirection: ‘column’ }}>
{results.length > 0 ? (
results.map((item, index)=>
<Result key={index} item={item}/>)
): (
<Text>Не найдено.</Text>
)}
</View>
</View>
</View>
<Footer/>
</ScrollView>
</View>
);
}