suggest add some code examples here, I think it's very helpful for people who are learning

https://react.dev/learn/preserving-and-resetting-state#preserving-state-for-removed-components

for example:
You could render all chats instead of just the current one, but hide all the others with CSS.

import { useState } from 'react';
import Chat from './Chat.js';
import ContactList from './ContactList.js';

export default function Messenger() {
  const [to, setTo] = useState(contacts[0]);

  return (
    <div>
      <ContactList
        contacts={contacts}
        selectedContact={to}
        onSelect={(contact) => setTo(contact)}
      />
      <div className="chats-container">
        {contacts.map((contact) => (
          <div
            key={contact.id}
            className={`chat-wrapper ${to.id === contact.id ? 'active' : ''}`}
          >
            <Chat contact={contact} />
          </div>
        ))}
      </div>
      <style>
        {`
          .chats-container {
            display: flex;
          }
          
          .chat-wrapper {
            display: none;
          }
          
          .chat-wrapper.active {
            display: block;
          }
        `}
      </style>
    </div>
  );
}

const contacts = [
  { id: 0, name: 'Taylor', email: 'taylor@mail.com' },
  { id: 1, name: 'Alice', email: 'alice@mail.com' },
  { id: 2, name: 'Bob', email: 'bob@mail.com' },
];

Start with the linked “Preserving state for removed components” section on react.dev and review the supplied Messenger example and screenshot. Add a clear code example explaining the suggested approach, then verify that it fits the surrounding documentation and renders correctly in the page.