在 onChange 之后，react-table 内部输入失去了对自身的引用

Question

我正在使用该react-table库创建一个包含可过滤列的表。该表的格式如下：

const defaultFilter = [{
  id: 'title',
  value: '',
}];

const ExampleTable = ({ documents, filter = defaultFilter }) => {
  const columns = [
    {
      accessor: 'title',
      filterable: true,
      id: 'title',
      width: 375,
      Cell: props => {
        return (
          <div>
            { props.value }
          </div>
        );
      },
      Filter: ({ filter, onChange }) => (
        <input
          onChange={ event => onChange(event.target.value) }
          style={ { width: '100%' } }
          placeholder={ 'Enter Filter' }
          value={ filter ? filter.value : '' }
        />
      ),
      filterMethod: (filter, row, column) => (row.title.toLowerCase().includes(filter.value.toLowerCase())),
      Header: () => (
        <span>
          Column Header
        </span>
      ),
    }
  ];

  return (
    <ReactTable
      columns={ columns }
      data={ documents } // an array of objects
      manual={ true }
      filtered={ filter }
      onFilteredChange={
        (filteredColumns, value) => {
          Store.updateFilter(filteredColumns);
        }
      }
    />
  );
};

每当我输入由Filter单列的属性创建的输入元素时，都会对我的通量存储进行回调，以更新过滤器，其中的过滤器会传递回我的无状态表组件。然而，在执行此特定操作时，将重新创建过滤器输入，并且输入因此会失去焦点。

因此，我每次都必须手动将焦点放回到输入上。是否有更好的方法来维护对该输入的引用，以便 React 不会在每次 props 更改时重新创建输入？