How to use the react-instantsearch-dom.connectSearchBox function in react-instantsearch-dom

const SearchBox = ({ currentRefinement, refine }) => (
  <div>
    <form role="search" action="" novalidate="">
      <input value="{currentRefinement}" type="search"> refine(event.currentTarget.value)}
      /&gt;
    </form>
  </div>
);

export const CustomSearchBox = connectSearchBox(SearchBox);

// on page load do not display
const Hits = ({ hits }) =&gt; (
  // if parent component set is type, render, otherwise hide
  <ul>
    {hits.length &lt; 1 ? <li>No search results found</li> : ''}
    {hits.map((hit) =&gt; (
      <li>
        <a href="{hit.fields.slug}">
          <span>
          </span></a><p><a href="{hit.fields.slug}">
        </a>
      </p></li>

      //  Work on highlighting
      // /////////////////////////////////////////////////</ul>

{ value: 'instant_search', label: 'Featured' },
                { value: 'instant_search_price_asc', label: 'Price asc.' },
                { value: 'instant_search_price_desc', label: 'Price desc.' },
              ]}
              defaultRefinement="instant_search"
            />
          
          
        
        
      
    );
  }
});

const ConnectedSearchBox = connectSearchBox(CustomSearchBox);
const ConnectedHits = connectInfiniteHits(CustomHits);

<form> e.preventDefault()}&gt;
        <input> refine(event.currentTarget.value)}
          type='search'
          placeholder='e.g. 550 or gmail'
          aria-label='Search'
          onFocus={() =&gt; onFocus()}
        /&gt;
        
      
    )
  }
}

export default connectSearchBox(SearchBox)
</form>

const onChangeDebounced = (event: any) => {
    setState({ value: event.currentTarget.value });
    debounced(refine, event.currentTarget.value);
  };

  return (
    
  );
};

const DebouncedSearchBox = connectSearchBox(SearchBox);

export default DebouncedSearchBox;

);
}

function MaterialUiClearAllFilters({ items, refine }) {
  return (
     refine(items)}
      label="Clear All"
      primary
      style={{ height: 48, width: '100%' }}
      className="ClearAll"
    />
  );
}

const ConnectedSearchBox = connectSearchBox(MaterialUiSearchBox);

const ConnectedCheckBoxRefinementList = connectRefinementList(
  MaterialUiCheckBoxRefinementList
);

const ConnectedNestedList = connectHierarchicalMenu(MaterialUiNestedList);

const ConnectedSortBy = connectSortBy(MaterialUiSortBy);

const ConnectedHits = connectInfiniteHits(CustomHits);

const ConnectedCurrentRefinements = connectCurrentRefinements(
  MaterialUiClearAllFilters
);

export default withURLSync(App);

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import algoliasearch from 'algoliasearch/lite';
import {
  InstantSearch,
  Configure,
  Hits,
  Highlight,
  connectSearchBox,
} from 'react-instantsearch-dom';
import Autocomplete from './Autocomplete';
import './App.css';

const VirtalSearchBox = connectSearchBox(() => null);

const searchClient = algoliasearch(
  'B1G2GM9NG0',
  'aadef574be1f9252bb48d4ea09b5cfe5'
);

class App extends Component {
  state = {
    query: '',
  };

  onSuggestionSelected = (_, { suggestion }) => {
    this.setState({
      query: suggestion.name,
    });
  };

document.addEventListener(eventName, detectClickOutside);
    }

    return () => {
      for (const eventName of eventNames) {
        document.removeEventListener(eventName, detectClickOutside);
      }
    };
  }, [detectClickOutside]);
}

interface SearchBoxProperties extends SearchBoxProvided {
  onFocus: (event: FocusEvent) => void;
}

const SearchBox = connectSearchBox(
  ({ currentRefinement, onFocus, refine }) => (
     refine(e.target.value)}
      onFocus={onFocus}
    />
  )
);

const Results = connectStateResults((comp) =>
  comp.searchResults && comp.searchResults.nbHits > 0
    ? (comp.children as any)
    : (`No results for '${comp.searchState.query}'` as any)

InstantSearch,
  Configure,
  Hits,
  connectSearchBox,
  connectRefinementList,
} from 'react-instantsearch-dom';
import Autocomplete from './Autocomplete';
import Hit from './Hit';
import './App.css';

const searchClient = algoliasearch(
  'latency',
  '6be0576ff61c053d5f9a3225e2a90f76'
);

const VirtualSearchBox = connectSearchBox(() => null);
const VirtualRefinementList = connectRefinementList(() => null);

class App extends Component {
  state = {
    query: '',
    categories: [],
  };

  onSuggestionSelected = (_, { suggestion }) => {
    const [
      category,
    ] = suggestion.instant_search.facets.exact_matches.categories;

    this.setState({
      query: suggestion.query,
      categories:

>
      <img width="40" src="https://res.cloudinary.com/hilnmyskv/image/upload/w_100,h_100,dpr_2.0//v1461180087/logo-instantsearchjs-avatar.png" alt="React InstantSearch">
    
    <a href="./">
      You
      <i>
    </i></a><i>
    
  
);

const SearchBox = connectSearchBox(({ currentRefinement, refine }) =&gt; (
  <div>
    <div>
      <input value="{currentRefinement}" type="text"> refine(e.target.value)}
        autoComplete="off"
        className="form-control"
      /&gt;
      <span>
        <button>
          <i>
        </i></button><i>
      </i></span><i>
    </i></div><i>
  </i></div></i>

}: any) => (
   {
      onChange(e);
      refine(e.target.value);
    }}
    placeholder="Search for shows and episodes..."
    showHeaderShadow={showHeaderShadow}
    aria-label="Search"
  />
);

const ConnectedSearchBox = connectSearchBox(MySearchBox);

export default ConnectedSearchBox;