What next function is not getting called for react infinite scroll

Question

I'm trying to use react infinite scroll to call more data on scroll but not able to integrate this library properly the next event is not getting triggered when if I scroll to whole page

  <InfiniteScroll
    dataLength={10}
    next={fetchData}
    hasMore
    loader={<Spinner />}
  >
    <>
      {ideas.results?.map((idea, index) => <IdeaCard key={index} idea={idea} getAllIdeas={getAllIdeas} />)}
    </>
  </InfiniteScroll>