如何在React中使用map更改状态值时选择单个列表元素

const [list, setList] = useState([
  { id: 1, name: "元素1", selected: false },
  { id: 2, name: "元素2", selected: false },
  { id: 3, name: "元素3", selected: false }
]);

const handleSelect = (id) => {
  const updatedList = list.map((item) => {
    if (item.id === id) {
      return { ...item, selected: !item.selected };
    }
    return item;
  });
  setList(updatedList);
};

const MyComponent = () => {
  return (
    <div>
      {list.map((item) => (
        <div key={item.id} onClick={() => handleSelect(item.id)}>
          {item.name}
        </div>
      ))}
    </div>
  );
};