如何在Material-UI的singleSelect中动态添加DataGrid列的valueOptions？

import React, { useState } from 'react';
import { DataGrid } from '@material-ui/data-grid';
import { Select, MenuItem } from '@material-ui/core';

const columns = [
  { field: 'id', headerName: 'ID', width: 70 },
  { field: 'name', headerName: 'Name', width: 150 },
  { field: 'age', headerName: 'Age', width: 90 },
  // 添加一个动态的列，其valueOptions会根据数据变化而变化
  { 
    field: 'dynamicColumn', 
    headerName: 'Dynamic Column', 
    width: 200,
    renderCell: (params) => {
      const { id, value } = params;
      const handleChange = (event) => {
        // 更新对应行的dynamicColumn值
        const updatedRows = rows.map((row) =>
          row.id === id ? { ...row, dynamicColumn: event.target.value } : row
        );
        setRows(updatedRows);
      };

      return (
        <Select value={value} onChange={handleChange}>
          {valueOptions.map((option) => (
            <MenuItem key={option.value} value={option.value}>
              {option.label}
            </MenuItem>
          ))}
        </Select>
      );
    },
  },
];

const initialRows = [
  { id: 1, name: 'John Doe', age: 25, dynamicColumn: 'Option 1' },
  { id: 2, name: 'Jane Smith', age: 32, dynamicColumn: 'Option 2' },
  // 初始数据中已包含动态列的valueOptions，可以根据需要进行修改
];

const initialOptions = [
  { value: 'Option 1', label: 'Option 1' },
  { value: 'Option 2', label: 'Option 2' },
];

const DynamicColumnsExample = () => {
  const [rows, setRows] = useState(initialRows);
  const [valueOptions, setValueOptions] = useState(initialOptions);

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

export default DynamicColumnsExample;