如何返回将在React Table中的组件内按编号排序的列？

npm install react-table

import { useTable, useSortBy } from 'react-table';

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

const columns = [
  { Header: 'ID', accessor: 'id' },
  { Header: 'Name', accessor: 'name' },
  { Header: 'Age', accessor: 'age' },
  // 其他列...
];

function MyTable() {
  const { headers, rows, prepareRow } = useTable(
    {
      columns,
      data,
      initialState: {
        sortBy: [{ id: 'id', desc: false }], // 初始按id升序排序
      },
    },
    useSortBy
  );

  return (
    <table>
      <thead>
        <tr>
          {headers.map((column) => (
            <th {...column.getHeaderProps(column.getSortByToggleProps())}>
              {column.render('Header')}
              <span>
                {column.isSorted ? (column.isSortedDesc ? ' 🔽' : ' 🔼') : ''}
              </span>
            </th>
          ))}
        </tr>
      </thead>
      <tbody>
        {rows.map((row) => {
          prepareRow(row);
          return (
            <tr {...row.getRowProps()}>
              {row.cells.map((cell) => (
                <td {...cell.getCellProps()}>{cell.render('Cell')}</td>
              ))}
            </tr>
          );
        })}
      </tbody>
    </table>
  );
}

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