react-infinite-scroller: load more function is not getting invoked!

Load More function is not getting invoked when scroll to down *Expected to see “loaded!”’ two three times but not, please help me

       loadMoreBooks = async () => {
         console.log('loaded!');
         const data = await db.collection('books').get();
         let books = this.state.books;
         data.forEach(book => {
           books = [...books, { id: book.id, ...book.data() }];
         });
         this.setState({ books });
      };

     // Render Method
          <InfiniteScroll
            pageStart={0}
            loadMore={this.loadMoreBooks}
            hasMore={hasMoreBooks}
            loader={
              <div className="loader" key={0}>
                Loading ...
              </div>
            }
          >
            <Tiles maxCount={4}>{bookList}</Tiles>
          </InfiniteScroll>