i need to show results of a search. its react native expo.
its my 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>
  );
}

its my 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 component of result
import { Text, View, Image, Pressable } from 'react-native';
import { gStyle } from '../styles/style';
import { firebase } from '../Firebase/firebase';
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>
    
  );
}

and 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>
  );
}