Ant Design + React-table。如何在Ant Design提供的UI元素之上构建react-table的过滤功能？

import React, { useState } from 'react';
import { Table, Input, Select } from 'antd';
import { useTable, useFilters } from 'react-table';

const data = [
  { name: 'John', age: 25, city: 'New York' },
  { name: 'Jane', age: 30, city: 'London' },
  { name: 'Bob', age: 35, city: 'Paris' },
];

const columns = [
  { Header: 'Name', accessor: 'name', Filter: ColumnFilter },
  { Header: 'Age', accessor: 'age', Filter: ColumnFilter },
  { Header: 'City', accessor: 'city', Filter: ColumnFilter },
];

function ColumnFilter({ column }) {
  const { filterValue, setFilter } = column;

  if (column.accessor === 'age') {
    return (
      <Select
        value={filterValue || ''}
        onChange={(e) => setFilter(e.target.value)}
      >
        <Select.Option value="">All</Select.Option>
        <Select.Option value="25">25</Select.Option>
        <Select.Option value="30">30</Select.Option>
        <Select.Option value="35">35</Select.Option>
      </Select>
    );
  }

  return (
    <Input
      value={filterValue || ''}
      onChange={(e) => setFilter(e.target.value)}
    />
  );
}

function App() {
  const [filterInput, setFilterInput] = useState('');

  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    rows,
    prepareRow,
    setFilter,
  } = useTable(
    {
      columns,
      data,
    },
    useFilters
  );

  return (
    <div>
      <Input
        value={filterInput}
        onChange={(e) => {
          setFilter('name', e.target.value);
          setFilterInput(e.target.value);
        }}
        placeholder="Filter by name"
      />

      <Table {...getTableProps()} dataSource={rows} pagination={false}>
        <Table.ColumnGroup>
          {headerGroups.map((headerGroup) => (
            <Table.Row {...headerGroup.getHeaderGroupProps()}>
              {headerGroup.headers.map((column) => (
                <Table.HeaderCell {...column.getHeaderProps()}>
                  {column.render('Header')}
                  <div>{column.canFilter ? column.render('Filter') : null}</div>
                </Table.HeaderCell>
              ))}
            </Table.Row>
          ))}
        </Table.ColumnGroup>
        <Table.Body {...getTableBodyProps()}>
          {rows.map((row) => {
            prepareRow(row);
            return (
              <Table.Row {...row.getRowProps()}>
                {row.cells.map((cell) => (
                  <Table.Cell {...cell.getCellProps()}>{cell.render('Cell')}</Table.Cell>
                ))}
              </Table.Row>
            );
          })}
        </Table.Body>
      </Table>
    </div>
  );
}

export default App;