How to update parent component in react - reactjs

Question

so I am trying to update my parent component whenever I scroll to the bottom. When I do scroll to the bottom, I am calling fetchData, which is in the parent component and is a dependency in the useEffect, however, the component does not update, leaving me with data from the first component render.
The first 7 sets of data is fetched successfully, and when I scroll to the bottom, fetchData is called again, however the component does not update, however when I then click save on the parent component, then the next sets of data is successfully loaded and displayed to the screen as it should. I feel I am doing something wrong i'm just clueless as to what it is. Any help would be very much appreciated
This is the parent component:
function Following({route, navigation}) {
const [followingData, setfollowingData] = useState();
const [loading, setLoading] = useState(true);
const [lastVisible, setLastVisible] = useState(0);
const fetchData = useCallback(() => {
const dataRef = firestore().collection('usernames');
dataRef
.doc(route.params.username.toLowerCase())
.collection('Following')
.orderBy('followedAt')
.startAfter(lastVisible)
.limit(7)
.onSnapshot((snapshot) => {
const last = snapshot.docs[snapshot.docs.length - 1];
setLastVisible(last.data().followedAt);
let promises = [];
snapshot.forEach((doc) => {
const data = doc.data();
promises.push(
data.path.get().then((res) => {
const userData = res.data();
return {
profileName: doc.id ? doc.id : null,
displayName: userData.displayName ? userData.displayName : null,
followerCount:
userData.followers !== undefined ? userData.followers : 0,
followingCount:
userData.following !== undefined ? userData.following : 0,
imageUrl: userData.imageUrl ? userData.imageUrl : null,
};
}),
);
});
Promise.all(promises).then((res) => {
setfollowingData(res);
});
setLoading(false);
});
}, []);
useEffect(() => {
const dataRef = firestore().collection('usernames');
const cleanup = dataRef
.doc(route.params.username.toLowerCase())
.collection('Following')
.onSnapshot(fetchData);
return cleanup;
}, [route.params.username, fetchData]);
return (
<>
{loading ? (
<ActivityIndicator size="large" color="black" />
) : (
<>
<FolloweringScreens
data={followingData}
screen={'Following'}
username={route.params.username}
navigation={navigation}
fetchData={fetchData}
/>
</>
)}
</>
);
}
export default Following;
And the child component is:
function FolloweringScreens({
data,
screen,
username,
navigation,
fetchData
}) {
return (
<>
<FlatList
scrollEnabled={true}
onEndReachedThreshold={0}
onEndReached={fetchData}
data={data}
keyExtractor={(i, index) => index.toString()}
renderItem={({item, index}) => {
return (
<>
(`All my data being used here`)
</>
);
}}
/>
</>
);
}
export default FolloweringScreens;