如何在MaterialTable EditField组件中使用状态

import React, { useState } from 'react';
import MaterialTable from 'material-table';

function MyTable() {
  const [data, setData] = useState([
    { id: 1, name: 'John Doe', age: 25 },
    { id: 2, name: 'Jane Smith', age: 30 },
    // 其他数据...
  ]);

  return (
    <MaterialTable
      title="Editable Example"
      columns={[
        { title: 'ID', field: 'id', editable: 'never' },
        { title: 'Name', field: 'name' },
        { title: 'Age', field: 'age', type: 'numeric' },
      ]}
      data={data}
      editable={{
        onRowAdd: newData =>
          new Promise((resolve, reject) => {
            setTimeout(() => {
              setData([...data, newData]);
              resolve();
            }, 1000);
          }),
        onRowUpdate: (newData, oldData) =>
          new Promise((resolve, reject) => {
            setTimeout(() => {
              const updatedData = [...data];
              const index = oldData.tableData.id;
              updatedData[index] = newData;
              setData(updatedData);
              resolve();
            }, 1000);
          }),
        onRowDelete: oldData =>
          new Promise((resolve, reject) => {
            setTimeout(() => {
              const updatedData = [...data];
              const index = oldData.tableData.id;
              updatedData.splice(index, 1);
              setData(updatedData);
              resolve();
            }, 1000);
          }),
      }}
    />
  );
}

function App() {
  return (
    <div>
      <MyTable />
    </div>
  );
}