Flatlist does not render when pulling data from firestore – React native

Thank you for reading my question. Truly appreciate it!

I have am stuck at the following:

I have some data that resides within Firebase Firestore. I am exporting a function that gets and returns the data. The function is below:

import { collection, query, getDocs, getFirestore } from "firebase/firestore"; 

const db = getFirestore();
const q = query(collection(db, "myData"));
const data = [];

export const getData = async ()=>{
    const querySnapshot = await getDocs(q);
    querySnapshot.forEach((doc) => {
    data.push (doc.data());
});
    return data;
}

In my home component, I have a flatlist that should take the returned data and use it to pass in as a prop to another component and renders that as items on home component. Here is the home component code:

import React, {useEffect, useState, useRef} from 'react'
import { View, Text, SafeAreaView, FlatList, Dimensions } from 'react-native';
import style from './style';
import { Button } from 'react-native-paper';
import OtherComponent from '../../components/OtherComponent'
import { getData } from '../../services/getData';


    export default function Home() {
    
        const [myData, setMyData] = useState(null)
    
        useEffect(() => {
          getData().then(setMyData);
        })
    
    
        const renderOtherComponent = ({data}) =>(
          <View style={{flex: 1}} >
          <OtherComponent title={data.Title}  />
          </View>
        )  
        return (
    
            <SafeAreaView style={style.mainContainer} >
    
            <View style={style.mainContent} >
    
            <FlatList
            data={myData}
            renderItem={renderOtherComponent}
            keyExtractor={data => data.id}
            pagingEnabled
          />
            
            </View>
            
            </SafeAreaView>
        )
    }

So far this is what I have been able to dig out based on the debugging:

1- The getData function does indeed grab the data from firestore and sets the myData state correctly within the useEffect hook.

2- the keyExtractor function extracts the right key and data.id shows the right key when looked into during debugging.

3- When the renderOtherComponent function is called, the data parameter shows undefined and this is where the error is thrown.

Any help would be greatly appreciated!

Thank you