I am creating an React project where i am rendering the data by calling the api, and api every time gives me array of data of length 10. i am using react-infinite-scroll-component for using infinite scrolling functionality. i want to load data everytime whenever i scroll at the half part of the screen i don't want to show a loader on my screen. can anybody help me on it.

 <InfiniteScroll
            dataLength={data.length}
            next={fetchMoreData}
            hasMore={true}
            loader={
              <CircularProgress/>
            }
          >
            {data.map((item, index) => {
              return <Card data={item} key={index} />;
            })}
          </InfiniteScroll>

this is my code of infinite scrolling, i tried changing the dataLength props , but it didn't worked.