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

Bắt đầu với phần “Preserving state for removed components” được liên kết trên react.dev và xem xét ví dụ Messenger cùng ảnh chụp màn hình được cung cấp. Thêm một ví dụ mã rõ ràng giải thích cách tiếp cận được đề xuất, sau đó xác minh rằng ví dụ đó phù hợp với tài liệu xung quanh và được render chính xác trên trang.