Screen is flickering when I click on lead more button 3rd time

Question

I have React component and I display some locations there when I click on load more button but it works for 1st and 2nd time but when I click on 3rd time my scroll bar and screen starts flickering and this problem is somehow relates to this issue: https://github.com/bvaughn/react-virtualized/issues/1327 but my code is different and not sure how to implement this on my code.

My react code:

return (
    <React.Fragment>
      <div className="wide">
        <div className="py-10">
          <InstantSearch
            searchClient={searchClient}
            indexName={index}
            searchState={searchState}
            onSearchStateChange={onSearchStateChange}
            createURL={searchState => createURL(searchState, fields)}>
            <Configure hitsPerPage={15} distinct />

            <div className="text-xs mt-0 mb-4">
              Select an option to filter location results below.
            </div>
            <LoadMoreButton className="py-12" language={language} /> // Here is I am displaying load more button which also has LoadMoreButton componenet which I also share below
          </InstantSearch>
        </div>
      </div>
    </React.Fragment>
  );

LoadMoreButton component:

class LoadMoreButton extends React.Component {

  render() {
    const { language, hasMore, refineNext, className } = this.props;

    return (
      <>
        {hasMore ? (
          <div className={"flex justify-center " + className}>
            <Button
              primary={true}
              disabled={!hasMore}
              label="Load more"
              onClick={refineNext}
              language={language}
            />
          </div>
        ) : null}
      </>
    );
  }
}


export default connectInfiniteHits(LoadMoreButton);

What can I try next?