Внутренний вход таблицы реакции теряет ссылку на себя после onChange

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 не воссоздает входные данные каждый раз, когда меняется реквизит?