react-bootstrap-typeahead connected to a table as a search input

Question

I am attempting to use react-bootstrap-typeahead as the search input for my react-data-table-component so that there would be an autosuggest option. My problem is on how could i reflect the selected option to my dataTable in such it would only show the specific item chosen (or paginate). Another problem is that I wasn't able to reflect the filteredItems as the option of the 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]);

This is my DataTable:

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