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

};

  return (
    <>
      

      <div id="bottom-detection-element" style="{{">
    
  );
};

export const ExploreResultList = connectInfiniteHits(Results);
</div>

const Wrapper = styled.div`
  display: grid;
  grid-gap: 10px;
`;

const ButtonWrapper = styled.div`
  display: grid;
  margin-top: 25px;

  @media (min-width: 992px) {
    justify-items: center;
  }
`;

const Cards = connectInfiniteHits(
  ({
    hits,
    hasMore,
    refineNext,
  }: {
    hits: Speaker[];
    hasMore: boolean;
    refineNext: (...args: any[]) => any;
  }) => (
    
      {hits.length ? (
        
          {hits.map(hit => (
            
          ))}

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

<button disabled="{!hasMore}">
          Show more
        </button>
      
    );

    MyInfiniteHits.propTypes = {
      hits: PropTypes.array.isRequired,
      hasMore: PropTypes.bool.isRequired,
      hasPrevious: PropTypes.bool.isRequired,
      refine: PropTypes.func.isRequired,
      refinePrevious: PropTypes.func.isRequired,
    };

    const CustomInfiniteHits = connectInfiniteHits(MyInfiniteHits);

    return (
       {
          urlLogger(JSON.stringify(searchState, null, 2));
        }}
      &gt;
        
      
    );
  })
  .add('with custom hitComponent', () =&gt; {

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

{hits.map(hit => (
            <li>
              
            </li>
          ))}
          <li> (this.sentinel = c)}
          /&gt;
        
      
    );
  }
}

export default connectInfiniteHits(InfiniteHits);
</li>