I'm trying to group messages by timestamp, just like how whatsApp does, I'm using firestore db for storing messages and my message schema is as follows:

interface MessageType {
    id: string;
    roomId: string;
    text: string;
    sentBy: string;
    createdAt: Timestamp;
    user: User;
}

I tried the following and I did get slightly what I needed but there are some issues, I have shared a link to the chat screen, there you can see what is happening, when I enter the chat room, they appear for like a millisecond and disappears, then if I hit ctrl+s, then the timestamp appears but they render in wrong place (they should render at top, but they are rendering at bottom of last message of that particular day, as I'm using inverted prop in Flatlist), also, when I hit ctrl+s (notice rendering... at bottom) the last message (cmoooon) disappears as you can see in the video!

const ChatScreen = () => {
  const dates = new Set();
  const [messages, setMessages] = useState([]);
  ...
  return <FlatList
            inverted
            data={[...messages].reverse()}
            keyExtractor={(item: MessageType) => item.id}
            renderItem={({ item }) => renderItem({ item, user, dates })}
          />
}

const renderItem = ({item, user, dates}) => {
    const isSameDate = dates.has(item?.createdAt?.toDate().toDateString());
    if (!isSameDate) {
        dates.add(item?.createdAt?.toDate().toDateString());
        return <DateItem time={item?.createdAt?.toDate().toDateString()} />
    }
    return <MessageItem data={item} key={item.id} myId={user.uid} />;
};

Video link: https://drive.google.com/file/d/1_h5742ObC9rBOqvBCZgrhJV9vWK1b9xz/view?usp=sharing

Can someone help me with this?