response- bootstrap -typeahead подключен к таблице как поисковый вход

Question

Я пытаюсь использовать response- bootstrap -typeahead в качестве ввода поиска для моего компонента response-data-table-component, чтобы была опция автозаполнения. Моя проблема в том, как я могу отразить выбранный параметр в моей таблице данных, чтобы он отображал только выбранный элемент c (или разбивку на страницы). Другая проблема заключается в том, что я не смог отразить filteredItems в качестве опции typeahead

const [filterText, setFilterText] = React.useState('');
  const [resetPaginationToggle, setResetPaginationToggle] = React.useState(
    false
  );

  //Data is passed to filtered items to sort
  const filteredItems =
    projects &&
    projects.filter(
      (project) =>
        project.name.toString().toLowerCase().includes(filterText) ||
        project?.description.toString().toLowerCase().includes(filterText)
    );

  const [singleSelections, setSingleSelections] = useState([]);
  const subHeaderComponentMemo = React.useMemo(() => {
    const handleClear = () => {
      if (filterText) {
        setResetPaginationToggle(!resetPaginationToggle);
        setFilterText('');
      }
    };

    let singleSelections = filterText;
    return (
      <Typeahead
        labelKey='name'
        onChange={(e) => setSingleSelections(e.target.value)}
        onClear={handleClear}
        options={filteredItems}
        placeholder='Search'
        selected={singleSelections}
      />
    );
  }, [filterText, resetPaginationToggle]);

Это мой DataTable:

 <DataTable
          defaultSortAsc='id'
          pagination
          paginationResetDefaultPage={resetPaginationToggle}
          columns={columns}
          subHeader
          subHeaderComponent={subHeaderComponentMemo}
          persistTableHead
          expandableRows
          expandOnRowClicked
          expandableRowsComponent={<ExpandedComponent data={filteredItems} />}
          data={filteredItems}
        />