Fetching data and Displaying from one Page to Another page but here it takes some time to display i don't Know why?

Question

Iam Having Two Screens A and B,

Iam fetching Data from A Screen and displaying it in B Screen

it takes some time to display why ?

Screen A

import { View, Text,StyleSheet,SafeAreaView,FlatList,ActivityIndicator,TextInput,Button,TouchableHighlight} from 'react-native';
import React,{useEffect,useState} from 'react';
import {useNavigation} from '@react-navigation/native';

const movieURL="https://api.lyrics.ovh/suggest/"

const Search = ({navigation}) => {
  
  
  const [data,setData]=useState([]);
  const [text,setText]=useState([]);


  const getLyrics=()=>{
  const {TextInputValue}=text;
  fetch(`${movieURL}/${TextInputValue}`)
  .then((response)=>response.json())
  .then((json)=>setData(json.data))
  console.log("inside the getlyrics");
}

return (

<SafeAreaView>
      <View>
      <Text>Lyrics</Text>
      <TextInput style={styles.input} onChangeText={TextInputValue=>setText({TextInputValue})}></TextInput>
      <Button title="Search" onPress={()=>getLyrics()}></Button>
      </View> 

<FlatList
            data={data}
            keyExtractor={(item, index) => {
              return item.id;
            }}
            renderItem={({ item,index }) => (
              <View style={{ paddingBottom: 10 }}>
                <Text style={styles.movieText}>
                   {item.artist.name} 
                   {item.title}
                  <Button style={styles.lybtn} onPress{()=>navigation.navigate('LyricsGet',item)} title="Lyrics Get"></Button>
                </Text>
              </View>
            )}
          />
    </SafeAreaView>
 )
}

Screen B

`import { View, Text,FlatList,Button,TouchableOpacity,StyleSheet,TextInput,RefreshControl} from 'react-native' import React,{useState,useEffect} from 'react' import { useIsFocused } from "@react-navigation/native";

const LyricsGet = ({route,navigation}) => {

const isFocused = useIsFocused();

const {title}=route.params;

console.log("the title of ",title);
    
const url="https://api.lyrics.ovh/v1/Sia";

const [song,setSong]=useState([]);

const [lyric,setLyric]=useState([]); 

const [input,setInput]=useState([]);
const [isFetching, setIsFetching] = useState(false);
const [loading,setLoading]=useState(true)

const fetchData=()=>{

fetch(`${url}/${title}`)
.then(response => response.json())
.then(results => {
  setLyric([results]);
  setIsFetching(false);
  setLoading(false);
}).catch(err=>{
 Alert.alert("Something went Wrong");
})

}

useEffect(() => {

if(isFocused){ 

fetchData();

} },[isFocused]);

 return (
    <View>

    <FlatList
            data={lyric}
            renderItem={({ item,index }) => <Text key={item._id}>{item.lyrics}</Text>}
            onRefresh={()=>fetchData()}
            refreshing={loading}
          />
  </View>
  );
}

`

Iam Created Two Pages Screen A and Screen B.In Screen A iam having the Search box and whenever iam typing in that search box it fetches an data and displays it,from that iam clicking one data it redirects to another Page(Screen B) it shows some data.And Again iam go to Screen A and search something means it redirect to Screen B correctly but the old data shows for 50 seconds again and again it shows new data why? Please help me to find out this

`