如何在React Table中重置过滤器字段？

import React, { useState } from 'react';

function MyTable() {
  const [filterValue, setFilterValue] = useState('');

  // 其他代码...
}

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

function MyTable() {
  const data = [...] // 表格数据
  const columns = [
    {
      Header: 'First Name',
      accessor: 'firstName',
      Filter: ColumnFilter // 自定义的过滤器组件
    },
    // 其他列定义...
  ];

  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    rows,
    prepareRow,
    state,
    setFilter // 用于设置过滤器字段的函数
  } = useTable(
    {
      columns,
      data
    },
    useFilters // 使用useFilters钩子函数
  );

  // 其他代码...
}

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

  return (
    <input
      value={filterValue || ''}
      onChange={(e) => setFilter(e.target.value)}
      placeholder="Filter..."
    />
  );
}

function MyTable() {
  // ...

  const resetFilters = () => {
    headerGroups.forEach(headerGroup => {
      headerGroup.headers.forEach(column => {
        if (column.canFilter) {
          column.setFilter('');
        }
      });
    });
  };

  return (
    <div>
      <button onClick={resetFilters}>Reset Filters</button>
      {/* 其他表格渲染代码... */}
    </div>
  );
}