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' },
];

Beginnen Sie mit dem verlinkten Abschnitt „Preserving state for removed components“ auf react.dev und sehen Sie sich das bereitgestellte Messenger-Beispiel und den Screenshot an. Fügen Sie ein klares Codebeispiel hinzu, das den vorgeschlagenen Ansatz erklärt, und überprüfen Sie anschließend, dass es in die umgebende Dokumentation passt und auf der Seite korrekt gerendert wird.