How to get search value after search on React-Bootstrap-Table-Next

Question

I am trying to sync my URL query params with filter, sort, and search input so that users can revisit the list in the same state.

I see there's an afterSearch prop on ToolkitProvider, but it doesn't receive the input value itself as a prop. I could cobble something together using DOM element methods and useEffect, but I'm curious if there is a more React kosher solution.

An additional issue to consider, is that if I access the DOM on afterSearch or something janky like this...

  useEffect(() => {
    document.getElementById('search-bar-0').addEventListener('keydown', handleKeyDown, false);

    return () => {
      document.getElementById('search-bar-0').removeEventListener('keydown', handleKeyDown, false);
    };
  }, [thing]);

  function handleKeyDown(e) {
    console.log(e.target.value); // always one character behind
  }

...the value returned from e.target.value is always one character behind what is actually in the search input.

Answer 1

A workaround for the search value not being returned as a param on something like afterSearch, is to create a custom search component, and use onKeyUp on the input there.