mapping each child component to parent with different reference

I want to show last received message in my app. But i dont find an efficient way. My chat component contains two different component chatWindow is a chat card and when the user clicked it. It navigates to chatScreen and the chatScreen is the normal chat screen that people send text each other. Also the chatScreen is a child of chatWindow. I think that if i give a function to chatScreen component in chatWindow component i take the value of last received message and render my chatWindow according to this message but there is a problem. If there is lots of chat card and each card has a different users i dont find out whose message belongs to which component. How can i solve that issue?

Here is the part of my chatWindow component:

 <FlatList
      contentContainerStyle={{
        width: "100%",
        paddingBottom: 200,
      }}
      keyExtractor={(item) => item.id}
      data={data}
      renderItem={({ item }) => {
        return (
          <TouchableOpacity
            activeOpacity={0.55}
            onPress={() =>
              navigation.navigate("ChatScreen", { ChatRoomID: item.id }) //I think that if i give a function reference to this i get the data from child but i dont find what data belengs to what chatScreen
            }
          >
            <ChatCard text={item.text} />
          </TouchableOpacity>
        );
      }}
    />

And also the chatScreen Component's send handler to getting last data that is appended:

  const appendMessages = useCallback(
    (messages) => {
      setMessages((previousMessages) =>
        GiftedChat.append(previousMessages, messages) // And i think that if i take the previousMessages from there by that function i can render my parent component
      );
    },
    [messages]
  );

Note: Each ChatScreen has a unique id and this is taking from server. And rendered according to that.