如何使用ag-grid react在表格中单击单元格时打开弹出窗口？

import React, { useState } from 'react';
import { AgGridReact } from 'ag-grid-react';
import 'ag-grid-community/dist/styles/ag-grid.css';
import 'ag-grid-community/dist/styles/ag-theme-alpine.css';
import Popup from './Popup'; // 弹出窗口组件

const MyGrid = () => {
  const [showPopup, setShowPopup] = useState(false); // 控制弹出窗口的显示与隐藏

  const columnDefs = [
    { headerName: 'Name', field: 'name' },
    { headerName: 'Age', field: 'age' },
    { headerName: 'Country', field: 'country' },
    // 其他列定义...
  ];

  const rowData = [
    { name: 'John', age: 25, country: 'USA' },
    { name: 'Alice', age: 30, country: 'Canada' },
    // 其他数据...
  ];

  const onCellClicked = (params) => {
    if (params.column.colId === 'name') {
      setShowPopup(true); // 点击name列时显示弹出窗口
    }
  };

  return (
    <div>
      <div className="ag-theme-alpine" style={{ height: '300px', width: '600px' }}>
        <AgGridReact
          columnDefs={columnDefs}
          rowData={rowData}
          onCellClicked={onCellClicked}
        />
      </div>
      {showPopup && <Popup />} // 根据showPopup状态决定是否显示弹出窗口
    </div>
  );
};

const Popup = () => {
  const closePopup = () => {
    setShowPopup(false); // 关闭弹出窗口
  };

  return (
    <div className="popup">
      <div className="popup-content">
        <h2>Popup Window</h2>
        <p>This is a popup window.</p>
        <button onClick={closePopup}>Close</button>
      </div>
    </div>
  );
};

.popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.popup-content {
  background-color: #fff;
  padding: 20px;
  border-radius: 5px;
}

.popup h2 {
  margin-top: 0;
}

.popup button {
  margin-top: 10px;
}