How to disable search button when no text is entered on search input field and enable when text is entered

Elastic Search
1

am using the below code. but unable to disable it when search term is having data.
how to achieve this ?

<SearchBox
  inputView={({ getAutocomplete, getInputProps, getButtonProps }) => (
    <>
      <div className="sui-search-box__wrapper">
        <input
          {...getInputProps({
            placeholder: "I am a custom placeholder"
          })}
        />
        {getAutocomplete()}
      </div>
      <input
        {...getButtonProps({
          "data-custom-attr": "some value"
        })}
      />
    </>
  )}
/>
2

Something like this should work...

<SearchProvider config={config}>
  <WithSearch mapContextToProps={({ wasSearched }) => ({ wasSearched })}>
    {({ wasSearched }) => (
      //...
      <SearchBox
        inputView={({ getAutocomplete, getInputProps, getButtonProps }) => (
          <>
            <div className="sui-search-box__wrapper">
              <input
                {...getInputProps({
                  placeholder: "I am a custom placeholder"
                })}
               disabled={wasSearched}
              />
3

adding that to the input props disabling entering into input field. But i need to disable button so i added inside button and that didnt work.