如何使Material UI Datagrid NoRowsOverlay组件可点击？

import React from 'react';
import { DataGrid } from '@mui/x-data-grid';

const columns = [
  { field: 'id', headerName: 'ID', width: 70 },
  { field: 'name', headerName: 'Name', width: 130 },
  { field: 'age', headerName: 'Age', width: 90 },
];

const rows = [];

const handleNoRowsClick = () => {
  // 处理点击事件的逻辑
  console.log('NoRowsOverlay被点击了！');
};

const CustomNoRowsOverlay = () => (
  <div onClick={handleNoRowsClick} style={{ width: '100%', height: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
    <span>No rows</span>
  </div>
);

const MyDataGrid = () => (
  <div style={{ height: 300, width: '100%' }}>
    <DataGrid
      rows={rows}
      columns={columns}
      components={{
        NoRowsOverlay: CustomNoRowsOverlay,
      }}
    />
  </div>
);

export default MyDataGrid;