Here is the code:

//Create conversation function.
function createConversation(recipients) {
  setConversations(prevConversations => {
    return [...prevConversations, {recipients, messages: []}];
  });
}
//Formatted conversations.
const formattedConversations = conversations.map(conversation => {
  const recipients = conversation.recipients.map(recipient => {
    const contact = contacts.find(contact => {
      return contact.id === recipient;
    });
    const name = (contact && contact.name) || recipient;
    return {id: recipient, name};
  });
  return {...conversation, recipients};
});
//Formatted conversations [END]
//value variable.
const value = {
  conversations: formattedConversations,
  createConversation,
};
//returning ConversationContext.Provider context.
return (
  <ConversationContext.Provider value={value}>
    {children}
  </ConversationContext.Provider>
);

Here I can't map my conversations in the UI

Here is the code which I used in UI:

export default function Conversations() {
  const {conversations} = useConversation;
  return (
    <ListGroup variant="flush">
      {conversations.map((conversation, index) => (
        <ListGroup.Item key={index}>
          {(conversation || []).map(r => r.name).join(', ')}
        </ListGroup.Item>
      ))}
    </ListGroup>
  );
}