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

);
});

function Price() {
  return (
    <div>
      <div>Price Range</div>
      <div>
        
      </div>
    </div>
  );
}

const MyHits = connectHits(({ hits }) =&gt; {
  const hs = hits.map(hit =&gt; );
  return <div id="hits">{hs}</div>;
});

function HitComponent({ hit }) {
  return (
    <div>
      <div>
        <img src="{hit.picture_url}" alt="{hit.name}">
        <img src="{hit.user.user.thumbnail_url}" alt="{hit.user.user.first_name}">
      </div>
      <div></div></div>

import React, { useState } from 'react';
import PropTypes from 'prop-types';
import { linkTo } from '@storybook/addon-links';
import {
  InstantSearch,
  ClearRefinements,
  SearchBox,
  Pagination,
  Highlight,
  Configure,
  connectHits,
} from 'react-instantsearch-dom';
import 'instantsearch.css/themes/algolia.css';

export const CustomHits = connectHits(({ hits }) => (
  <div>
    {hits.map(hit =&gt; (
      <div>
        {hit.image &amp;&amp; (
          <div>
            <img src="{`https://res.cloudinary.com/hilnmyskv/image/fetch/h_100,q_100,f_auto/${hit.image}`}">
          </div>
        )}
        <div>
          <div>
            
            <span> - ${hit.price}</span>
            <span> - {hit.rating} stars</span>
          </div></div></div></div>

const IntegrationResults = ({ hits }) => (
    <div>
        {hits.map(hit =&gt; )}
    </div>
)

IntegrationResults.propTypes = {
    hits: PropTypes.arrayOf(
        PropTypes.shape({
            objectID: PropTypes.string.isRequired,
        }).isRequired,
    ).isRequired,
}

const IntegrationResultsList = connectHits(IntegrationResults)

export default IntegrationResultsList

:hover {
      color: ${colors.lightest};
    }
  }
`;

const Link = styled('a')`
  display: inline-block;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  margin-top: 0.5rem;
  text-decoration: none;
  text-transform: uppercase;
`;

const Hits = connectHits(({ hits }) => (
  
    {hits.map(hit => (
      
        
          <a href="{`/${hit.slug}`}">
            
          </a>
        
        <p>
          
        </p>
        Read this post ›
      
    ))}
  
));

import SearchIcon from "../images/icons/magnifier.svg";
import SearchIconActive from "../images/icons/magnifier-active.svg";
import algoliasearch from "algoliasearch/lite";
import { bpMaxSM } from "../utils/breakpoints";
import {
  InstantSearch,
  Configure,
  Highlight,
  connectHits,
  connectSearchBox,
  connectStateResults
} from "react-instantsearch-dom";

const client = algoliasearch("NLOD4N9T1X", "27ac39ffd2f1ec6477d7772f42ec3bb0");

const Hits = connectHits(({ hits }) => (
  <div>
    <ul></ul></div>

);

FeaturedPackage.propTypes = {
  name: PropTypes.string.isRequired,
  owner: PropTypes.shape({
    name: PropTypes.string.isRequired,
    link: PropTypes.string.isRequired,
    avatar: PropTypes.string.isRequired,
  }),
  description: PropTypes.string.isRequired,
  keywords: PropTypes.arrayOf(PropTypes.string).isRequired,
};

const FilterByIds = connectRefinementList(() => null);

const Hits = connectHits(({ hits }) => {
  const half = Math.floor(hits.length / 2);
  const groups = [hits.slice(0, half), hits.slice(half, hits.length)];
  return (
    <div>
      {groups.map((packages, i) =&gt; (
        <div>
          {packages.map(({ name, description, owner, keywords, objectID }) =&gt; (
            
          ))}</div></div>

<span>
      {' '}
      
    </span>
    
      
    
  
);

export default connectHits(connectStateResults(SearchSuggestions));

));
  return <div>{categoryOrBrand}</div>;
});

const CategoryOrBrand = ({ hit }) =&gt; (
  <div>
    
  </div>
);

CategoryOrBrand.propTypes = {
  hit: PropTypes.object.isRequired,
};

const CustomProducts = connectHits(({ hits }) =&gt; {
  const products = hits.map(hit =&gt; );
  return <div>{products}</div>;
});

const Product = ({ hit }) =&gt; {
  const image = `https://ecommerce-images.algolia.com/img/produit/nano/${hit.objectID}-1.jpg%3Falgolia`;
  return (
    <div>
      <div>
        <div>
          <img src="{`${image}`}">
        </div>
      </div>
      <div>
        <div>
          </div></div></div>

return (
                    
                        
                            {type}
                        
                        {filteredHits.map((hit: any, index: number) => (
                            
                        ))}
                    
                );
            })}
        
    );
};

const CustomHits = connectHits(Hits);

const FeaturedToolsWrapper = styled.div`
    margin-bottom: 50px;
`;

const ResourcesWrapper = styled.div`
    margin-bottom: 40px;
`;

const filters = [
    { attribute: 'type', heading: 'Type' },
    { attribute: 'tags', heading: 'Developer Persona' },
    { attribute: 'difficulty', heading: 'Level' },
    { attribute: 'isCommunity', heading: 'Community Maintained', customLabel: 'Include Community Maintained' },
];

 
    
     
    
     
    {hit.tags.map((tag, index) => (
      
        {index > 0 && `, `}
        {tag}
      
    ))}
  
)

export default connectHits(function HitComp({ type, hits, onClick }) {
  const extend = { postHit }[type]
  return hits.map(hit => (
    <div>
      
        <h4>
          
        </h4>
      
      {extend &amp;&amp; extend(hit)}
      
    </div>
  ))
})