Problem while upgrading a code snippet from firebasev8 to firebase v9

Question

Before you read and look out for the answer of this question, Please read this question, as the current question is just the continuation of it. It was basically a code to display a List of Chat from firestore database. But it was a firebase v8 snippet.

The answer I got from the question was:

---

import { collection, onSnapshot } from "firebase/firestore";

useEffect(() => {
  const colRef = collection(db, "chats")

  onSnapshot(colRef, (snapshot) => {
    setChats(
      snapshot.docs.map((doc) => ({
        id: doc.id,
        data: doc.data(),
      }))
    )
  });

  return unsubscribe;
}, [])

But I was unable to verify the answer, because as I was using React Native, in the return() part. The code which I was running was not displaying the ChatNames. Most probably it was due to the incorrect syntax. Note: I did not receive any error, the chatName was simply not getting displayed

The following code was in my return() part:

// screens/HomeScreen.js
        {chats.map(({ id, data: { chatName }}) => (
          <CustomChatList /> // I have imported it correctly from '../components/CustomChatList'
        ))}

components/CustomChatScreen.js

import { View, Text } from 'react-native'
import React from 'react'
import { ListItem, Avatar } from 'react-native-elements'

const CustomChatList = ({ id, chatName, enterChat }) => {

  return (
    <ListItem 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 Dummy Text
            </ListItem.Subtitle>
        </ListItem.Content>
    </ListItem>
  )
}

export default CustomChatList

Also Note: It is showing the ListItem.Subtitle and Avatar correctly.