如何删除Material UI DataGrid (Reactjs)中的特定行

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

const rows = [
  { id: 1, name: 'John Doe', age: 25 },
  { id: 2, name: 'Jane Smith', age: 30 },
  { id: 3, name: 'Bob Johnson', age: 35 },
];

const ExampleDataGrid = () => {
  const [gridRows, setGridRows] = useState(rows);

  const handleDeleteRow = (id) => {
    const updatedRows = gridRows.filter((row) => row.id !== id);
    setGridRows(updatedRows);
  };

  const columns = [
    { field: 'id', headerName: 'ID', width: 70 },
    { field: 'name', headerName: 'Name', width: 150 },
    { field: 'age', headerName: 'Age', width: 90 },
    {
      field: 'actions',
      headerName: 'Actions',
      width: 120,
      renderCell: (params) => (
        <button onClick={() => handleDeleteRow(params.row.id)}>Delete</button>
      ),
    },
  ];

  return (
    <div style={{ height: 300, width: '100%' }}>
      <DataGrid rows={gridRows} columns={columns} />
    </div>
  );
};

export default ExampleDataGrid;