Material-ui表排序不起作用反应

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

const MyTable = () => {
  const [data, setData] = useState([...]); // 表格数据
  const [orderBy, setOrderBy] = useState(''); // 当前排序的字段
  const [order, setOrder] = useState('asc'); // 排序方式，默认升序

  const handleSort = (field) => {
    const isAsc = orderBy === field && order === 'asc';
    const sortedData = [...data].sort((a, b) => {
      if (a[field] < b[field]) return isAsc ? -1 : 1;
      if (a[field] > b[field]) return isAsc ? 1 : -1;
      return 0;
    });

    setData(sortedData);
    setOrderBy(field);
    setOrder(isAsc ? 'desc' : 'asc');
  };

  return (
    <Table>
      <TableHead>
        <TableRow>
          <TableCell>
            <TableSortLabel
              active={orderBy === 'name'}
              direction={order}
              onClick={() => handleSort('name')}
            >
              Name
            </TableSortLabel>
          </TableCell>
          {/* 其他表头列 */}
        </TableRow>
      </TableHead>
      {/* 表格内容 */}
    </Table>
  );
};

export default MyTable;