如何以可重用的方式为我的material-ui表创建选择过滤器？

import React, { useState } from 'react';
import { Table, TableBody, TableCell, TableHead, TableRow, Select, MenuItem } from '@material-ui/core';

// 可重用的选择过滤器组件
function FilterSelector({ options, onChange }) {
  const [selectedValue, setSelectedValue] = useState(options[0]);

  const handleChange = (event) => {
    setSelectedValue(event.target.value);
    onChange(event.target.value);
  };

  return (
    <Select value={selectedValue} onChange={handleChange}>
      {options.map((option, index) => (
        <MenuItem key={index} value={option}>
          {option}
        </MenuItem>
      ))}
    </Select>
  );
}

// 使用选择过滤器的表格组件
function FilterableTable({ data, filterOptions }) {
  const [filteredData, setFilteredData] = useState(data);

  const handleFilterChange = (filterValue) => {
    const filtered = data.filter(item => item.category === filterValue);
    setFilteredData(filtered);
  };

  return (
    <>
      <FilterSelector options={filterOptions} onChange={handleFilterChange} />
      <Table>
        <TableHead>
          <TableRow>
            <TableCell>ID</TableCell>
            <TableCell>Name</TableCell>
            <TableCell>Category</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {filteredData.map((row, index) => (
            <TableRow key={index}>
              <TableCell>{row.id}</TableCell>
              <TableCell>{row.name}</TableCell>
              <TableCell>{row.category}</TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </>
  );
}

// 示例数据和使用组件
const sampleData = [
  { id: 1, name: 'Item 1', category: 'A' },
  { id: 2, name: 'Item 2', category: 'B' },
  { id: 3, name: 'Item 3', category: 'A' },
];

const filterOptions = ['A', 'B'];

function App() {
  return (
    <div>
      <FilterableTable data={sampleData} filterOptions={filterOptions} />
    </div>
  );
}

export default App;