Data not being displayed from firebase v9 - React Native - firebase

Question

I want to display all the data, fetched from firestore, to be displayed through a component in React Native.
There are 3 chat names in the database.
I am expecting to Display the name of the chats from firestore. But when I tried, it showed me 3 components with no header. (Which is the main thing)
It makes me clearly understand that it is able to fetch the data from firestore, but is unable to put the data into an array.
According to the answer of Problem while upgrading a code snippet from firebase v8 to firebase v9, I have used the following code:
In the screens/Home.js file:
// Home.js
import { collection, onSnapshot } from "firebase/firestore";
import CustomChatList from '../components/CustomChatList';
import { db } from '../firebase';
import React, { useEffect, useLayoutEffect, useState } from 'react'
const [chats, setChats] = useState([])
useEffect(() => {
const colRef = collection(db, "chats")
onSnapshot(colRef, (snapshot) => {
setChats(
snapshot.docs.map((doc) => ({
id: doc.id,
data: doc.data(),
}))
)
});
return unsubscribe;
}, [])
return(
<div>
{chats.map(({ id, data: { chatName } }) => (
<CustomChatList id={id} chats={chatName} />
))}
</div>
)
In the components/CustomChatList.js file:
import { View, Text } from 'react-native'
import React from 'react'
import { ListItem, Avatar } from 'react-native-elements'
const CustomChatList = ({ id, chatName, enterChat }) => {
return (
<ListItem key={id} bottomDivider>
<Avatar rounded source={{ uri : 'https://toppng.com/uploads/preview/roger-berry-avatar-placeholder-11562991561rbrfzlng6h.png'}} />
<ListItem.Content>
<ListItem.Title>
{chatName}
</ListItem.Title>
<ListItem.Subtitle numberOfLines={1} ellipsizeMode="tail">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</ListItem.Subtitle>
</ListItem.Content>
</ListItem>
)
}
export default CustomChatList
As of now, I have not recieved any error yet. Only the ChatNames are not getting displayed. How can I solve this?