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

import algoliasearch from 'algoliasearch/lite'
import React, { createRef, useMemo, useState } from 'react'
import { connectStateResults, Index, InstantSearch } from 'react-instantsearch-dom'
import { useOnClickOutside } from 'hooks'
import Hits from './Hits'
import Input from './Input'
import { HitsWrapper, PoweredBy, Root } from './styles'

const Results = connectStateResults(
  ({ searching, searchState: state, searchResults: res }) =>
    (searching &amp;&amp; <div>Searching...</div>) ||
    (res &amp;&amp; res.nbHits === 0 &amp;&amp; <div>No results for '{state.query}'</div>)
)

const Stats = connectStateResults(
  ({ searchResults: res }) =&gt;
    res &amp;&amp; res.nbHits &gt; 0 &amp;&amp; `${res.nbHits} result${res.nbHits &gt; 1 ? `s` : ``}`
)

export default function Search({ indices, collapse = true, hitsAsGrid }) {
  const ref = createRef()
  const [query, setQuery] = useState(``)
  const [focus, setFocus] = useState(false)
  const appId = process.env.GATSBY_ALGOLIA_APP_ID
  const searchKey = process.env.GATSBY_ALGOLIA_SEARCH_KEY
  // useMemo prevents the searchClient from being recreated on every render.
  // Avoids unnecessary XHR requests (see https://tinyurl.com/yyj93r2s).
  const searchClient = useMemo(() =&gt; algoliasearch(appId, searchKey), [
    appId,
    searchKey,
  ])

};
}

const SearchBox = ({ currentRefinement, refine }) => (
   refine(event.currentTarget.value)}
  />
);

const CustomSearchBox = connectSearchBox(SearchBox);

const Content = connectStateResults(
  ({ searchState, searchResults }) =>
    searchResults && searchResults.nbHits !== 0
      ? null
      : <div>
          No plugins were found matching <em>{searchState.query}</em>
        </div>
);


const Hit = ({ hit }) =&gt; {
  if (hit.api &amp;&amp; hit.api.length) {
    if (SemverJS.split(hit.api[0].from).major == '3') {
      return (
        
          
            <a href="{`https://poggit.pmmp.io/p/${hit.project_name}`}"></a>

}

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)
);

const Stats = connectStateResults(
  (comp) =>
    comp.searchResults &&
    comp.searchResults.nbHits > 0 &&
    (`${comp.searchResults.nbHits} result${
      comp.searchResults.nbHits > 1 ? `s` : ``
    }` as any)
);

const DocHit = (siteUrl: string, clickHandler: () => void) => ({
  hit,

Index,
  Hits,
  connectStateResults,
} from 'react-instantsearch-dom'
import algoliasearch from 'algoliasearch/lite'
import cn from 'classnames'
import { Algolia } from 'styled-icons/fa-brands/Algolia'

import Input from './input'
import * as hitComps from './hitComps'

const IndexResults = connectStateResults(({ searchResults, children }) =>
  searchResults && searchResults.nbHits !== 0 ? children : null
)

const AllResults = connectStateResults(
  ({ allSearchResults, searching, children }) => {
    const hasResults =
      allSearchResults &&
      Object.values(allSearchResults).some(results => results.nbHits > 0)

    return !hasResults ? (
      <div>
        {searching ? (
          <div>
            <h5 aria-hidden="">
            <p>Searching the catacombs...</p>
          </h5></div>
        ) : (
          <div>
            <h5 aria-hidden="">
            <p>Couldn’t find any results!</p></h5></div></div>

.add('NoLoading/HasQuery', () => {
    const Content = connectStateResults(({ searching }) =>
      searching ? <div>searching</div> : <div>No searching</div>
    );
    return (
      
        <content>
      </content>
    );
  });

import algoliasearch from 'algoliasearch/lite'
import React, { createRef, useMemo, useState } from 'react'
import { connectStateResults, Index, InstantSearch } from 'react-instantsearch-dom'
import { useOnClickOutside } from 'hooks'
import Hits from './Hits'
import Input from './Input'
import { HitsWrapper, PoweredBy, Root } from './styles'

const Results = connectStateResults(
  ({ searching, searchState: state, searchResults: res }) =>
    (searching &amp;&amp; <div>Searching...</div>) ||
    (res &amp;&amp; res.nbHits === 0 &amp;&amp; <div>No results for '{state.query}'</div>)
)

const Stats = connectStateResults(
  ({ searchResults: res }) =&gt;
    res &amp;&amp; res.nbHits &gt; 0 &amp;&amp; `${res.nbHits} result${res.nbHits &gt; 1 ? `s` : ``}`
)

export default function Search({ indices, collapse = true, hitsAsGrid }) {
  const ref = createRef()
  const [query, setQuery] = useState(``)
  const [focus, setFocus] = useState(false)
  const appId = process.env.GATSBY_ALGOLIA_APP_ID
  const searchKey = process.env.GATSBY_ALGOLIA_SEARCH_KEY

<div>
          
        </div>
        <div>
          
        </div>
        <div>
          <div>{icons}</div>
          <div>${hit.price}</div>
        </div>
      
    
  );
};

const CustomResults = connectStateResults(({ searchState, searchResults }) =&gt; (
  <div>
    <section>
      
      <div>
        <label>Sort by</label>
        
      </div>
    </section>
</div>

fill="#000"
                    fillRule="nonzero"
                    d="M8.26 2.75a3.896 3.896 0 1 0 1.102 3.262l.007-.056a.49.49 0 0 1 .485-.456c.253 0 .451.206.437.457 0 0 .012-.109-.006.061a4.813 4.813 0 1 1-1.348-3.887v-.987a.458.458 0 1 1 .917.002v2.062a.459.459 0 0 1-.459.459H7.334a.458.458 0 1 1-.002-.917h.928z"
                  />
                
              
              Clear filters
            
          ),
        }}
      />
    
  );
};

export default connectStateResults(NoResults);