如何在我的Modal上使用键(从列表项目键中定义)作为道具

const data = [
  { key: 1, name: "Item 1" },
  { key: 2, name: "Item 2" },
  { key: 3, name: "Item 3" }
];

const [showModal, setShowModal] = useState(false);
const [selectedKey, setSelectedKey] = useState(null);

{data.map(item => (
  <div key={item.key} onClick={() => {
    setSelectedKey(item.key);
    setShowModal(true);
  }}>
    {item.name}
  </div>
))}

const Modal = () => {
  // 根据选定的键值获取相应的项目
  const selectedItem = data.find(item => item.key === selectedKey);

  return (
    <div className={showModal ? "modal show" : "modal"}>
      <div className="modal-content">
        <span className="close-button" onClick={() => setShowModal(false)}>&times;</span>
        {selectedItem && <h2>{selectedItem.name}</h2>}
        {/* 其他Modal内容 */}
      </div>
    </div>
  );
}

return (
  <div>
    {/* 父组件内容 */}
    {showModal && <Modal />}
  </div>
);