Estoy tratando de agrupar mensajes por marca de tiempo, tal como lo hace WhatsApp, estoy usando firestore db para almacenar mensajes y el esquema de mi mensaje es el siguiente:

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

Intenté lo siguiente y obtuve un poco lo que necesitaba pero hay algunos problemas, he compartido un enlace a la pantalla de chat, allí puedes ver lo que está sucediendo, cuando entro en la sala de chat, aparecen como un milisegundo y desaparece, luego, si presiono ctrl + s, aparece la marca de tiempo, pero se muestran en el lugar equivocado (deberían mostrarse en la parte superior, pero se muestran en la parte inferior del último mensaje de ese día en particular, ya que estoy usando prop invertida en Flatlist ), además, cuando presiono ctrl+s (observe el rendering... en la parte inferior) el último mensaje ( cmoooon ) desaparece como se puede ver en el 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} />; };

Enlace de vídeo: https://drive.google.com/file/d/1_h5742ObC9rBOqvBCZgrhJV9vWK1b9xz/view?usp=sharing

¿Puede alguien ayudarme con esto?