How to use the react-instantsearch/connectors.connectStateResults function in react-instantsearch

import {
  connectStateResults,
  connectHits,
} from 'react-instantsearch/connectors';
// import './App.css';

const Analytics = connectStateResults(({ searchResults }) => {
  window.aa('initSearch', {
    getQueryID: () => searchResults && searchResults._rawResults[0].queryID,
  });

  return null;
});

const Hits = connectHits(
  connectStateResults(({ hits, searchResults }) => (
    <div>
      {hits.map((hit, index) =&gt; (
        <div>
          
          <button> {
              window.aa('click', {
                objectID: hit.objectID,
                position:
                  searchResults.hitsPerPage * searchResults.page + index + 1,
              });
            }}
          &gt;
            Click event
          </button>
          </div></div>

import React from 'react';
import { groupBy, filter } from 'lodash';
import { Measures, NoMeasure } from './measure';
import { connectStateResults } from 'react-instantsearch/connectors';

import './../../scss/theme.css';
  
const Theme = connectStateResults(({ hit:theme, searchState: { query } }) => {
  let { measures } = theme;

  measures = filter(measures, m => m.title.match(new RegExp(query, 'gi')));
  let grouped = groupBy(measures, 'status');
  measures = (grouped['DONE'] || [])
                .concat(grouped['IN_PROGRESS'] || [])
                .concat(grouped['UPCOMING'] || []);
  
  if (query && !measures.length) {
    // no matching measures for this keyword query
    // return nothing so it doesn't render
    return null;
  }
  
  return (
    <article></article>

) : null

SearchResults.propTypes = {
  searchState: PropTypes.shape({
    // from connectStateResults
    query: PropTypes.string
  }),
  resultsTitle: PropTypes.string,
  onSuggestionClick: PropTypes.func.isRequired,
  // hits: PropTypes.object, // from react-instantsearch
  searchResults: PropTypes.object // from connectStateResults
}

export default connectStateResults(SearchResults)

>
              {searchResults.nbHits} results
            
          )}

        
          <a color="white">
            
          </a>
        
      
    )
  }
}

export default withRouter(connectSearchBox(connectStateResults(SearchBox)))

)}
                {measuresComponent}
            
        )
    }
}

ThemeDetail = connect(
    ({
        majorOnly,
        locale,
        profiles: { activeProfile },
        measures: { measures },
        manifestos: { activeManifestos },
    }) => ({ majorOnly, measures, activeProfile, activeManifestos, locale })
)(connectStateResults(ThemeDetail))

export { ThemeDetail }

}

const Wrapper = styled.div`
  height: 100%;
  display: flex;
  flex-direction: column;
`;

const HitsWrapper = styled.div`
  flex: 1;
  padding: 25px;
  padding-top: 0;
  overflow: auto;
`;

export default connectStateResults(AddDependencyModal);

? !!refinementList[`titles.${locale}`].length
            : false
        return (
            <div>
                
                
            </div>
        )
    }
}

export default connectStateResults(Results)

<a>Legal</a>
          
          
            <a>Privacy Policy</a>
          
          
            <a>Affiliate Disclosure</a>
          
          <a href="https://github.com/BeeDesignLLC/GlutenProject.com">Source Code</a>
        
      
    )
  }
}

export default withRouter(connectStateResults(Page))

display: flex;
  flex-direction: column;
  margin: 10px 0;
`;

const Body = ({ searchState, searchResults }) => (
  
    {searchResults && searchResults.nbHits !== 0 ? (
      
    ) : (
      <p>No results has been found for {searchState.query}</p>
    )}
  
);

export const WrappedBody = connectStateResults(Body);

export const Resulting = ({ hit }) =&gt; (
  
    
    
      <title>
        &lt;Awesome&gt;awesome&lt;/Awesome&gt; {hit.listName}
      </title>
      {hit.cat}
      
      
        
      
    
  
);