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

import React from 'react';

import algoliasearch from 'algoliasearch/lite';
import { Configure, connectAutoComplete, Index, InstantSearch } from 'react-instantsearch-dom';

import { CustomAutoComplete } from 'ts/components/docs/search/autocomplete';

const searchClient = algoliasearch('39X6WOJZKW', '6acba761a34d99781628c6178af1e16c');

interface ISearchInputProps {
    isHome?: boolean;
}

const AutoComplete = connectAutoComplete(CustomAutoComplete);

export const SearchInput: React.FC = ({ isHome }) => (
     {
            // console.log('searchState', searchState);
        }}
    >
        
        
        
        
    
);

return (
      
    );
  }
}

export default connectAutoComplete(Autocomplete);

return (
      
    );
  }
}

export default connectAutoComplete(AutoComplete);

import React from 'react';

import {
  Highlight,
  connectStateResults,
  connectAutoComplete
} from 'react-instantsearch-dom';
import { isEmpty } from 'lodash';

import EmptySearch from './EmptySearch';
import NoResults from './NoResults';

import './search-page-hits.css';

const AllHits = connectAutoComplete(({ hits, currentRefinement }) => {
  const isHitsEmpty = !hits.length;

  return currentRefinement && !isHitsEmpty ? (
    <div>
      <ul>
        {hits.map(result =&gt; (
          <a rel="noopener noreferrer" href="{result.url}">
            <li>
              <p>
                
              </p></li></a></ul></div>

hit.name)}
    onSearchChange={query => refine(query)}
  />
);

AsyncMention.propTypes = {
  hits: PropTypes.array,
  refine: PropTypes.func,
};

const ConnectedAsyncMention = connectAutoComplete(AsyncMention);

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

const App = () => (
  
    
  
);

export default App;

onSuggestionsClearRequested={onSuggestionsClearRequested}
                    getSuggestionValue={getSuggestionValue}
                    renderSuggestion={renderSuggestion}
                    inputProps={inputProps}
                    renderSectionTitle={renderSectionTitle}
                    getSectionSuggestions={getSectionSuggestions}
                />
            
            {currentRefinement && (
                
            )}
        
    );
};

export const AutoComplete = connectAutoComplete(withRouter(CustomAutoComplete));

indexName="products"
        root={{
          Root: 'div',
          props: {
            style: {
              border: '1px solid red',
            },
          },
        }}
      >
        
      
    
  ));

const AutoComplete = connectAutoComplete(
  ({ hits, currentRefinement, refine }) => (
     refine(value)}
      onSuggestionsClearRequested={() => refine('')}
      getSuggestionValue={hit => hit.name}
      renderSuggestion={hit =>
        hit.brand ?  : 
      }
      inputProps={{
        placeholder: 'Search for a category, brand or product',
        value: currentRefinement,
        onChange: () => {},
      }}
      renderSectionTitle={section => section.index}