Algolia SearchBox can't set its value from Hits or customize value

Question

I'm using react-instantsearch with SearchBox to performance search tasks, when type some letters in SearchBox there will show the results by Hits component. The problem is I can't add value attribute on SearchBox to change text in it manually:

const [searchKeywords, setSearchKeywords] = useState("")
<InstantSearchNext
 indexName="items"
 searchClient={searchClient}
>
  <SearchBox
    id="items-search"
    value={searchKeywords}
  />
</<InstantSearchNext>

The value attribute doesn't work above

Is there a way to do that?

I tried to use document.querySelector to set input box value inside SearchBox but can't get it work.

Answer 1

If you need to set the value of the query from outsite the searchbox, you can use the function refine from the react hook useSearchBox as follows:

const { refine } = useSearchBox();

const changeQuery = (newValue) => refine(newValue);