Javascript 找不到处于状态的联系人

我目前正在学习react 与它的文档，我给自己一个挑战，并想创建一个小聊天应用程序.我了解一些基本情况，我对各州也有意见.

在我的代码中，有一个Contact对象，它保存我的联系人的信息.我使用一个州来包含它，并创建了三个按钮，每个人的名字都在其中.对于按钮，我使用了一个带有两个props HandleButtonClick和Contact的组件.

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

const [contactList, setContactList] = useState(contacts);个

<ContactList handleButtonClick={handleButtonClick} contacts={contactList} />个

在组件内部:

export default function ContactList({ handleButtonClick, contacts }) {
  return (
    <div className="contact-buttons">
      {contacts.map((contact) => {
        return (
          <button
            key={contact.id}
            className="personName"
            onClick={handleButtonClick}
            value={contact.id}
          >
            {contact.name}
          </button>
        );
      })}
    </div>
  );
}

我想要做的事情是，当handleButtonClick执行时，它需要使用Person的id更新一个状态，并使用该id查找具有ContactList.find的正确的Person.

  const [selectedId, setSelectedId] = useState(0);
  const contact = contactList.find((c) => c.id === selectedId);

  function handleButtonClick(e){
    e.preventDefault()
    setSelectedId(e.target.value);
  }

问题是，对于第一人称联系，正确开始，但它永远不会更新.如果我没有弄错，当我设置选定的ID时，它应该会触发重新渲染并设置联系人.我错过了什么？谢谢你！！