React-infinite-scroll loadMore実行されない

前提・実現したいこと

Reactを用いて現在無限スクロールを実行しようとしています、そこでReact-infinite-scrollを用いて開発をしようと思いました。

しかし、いくつか自分でも解決できない現象が起きて困っています。

1.initialLoad={true}にすると起動時に一気に読み込んでします
数字はpageを表しています、Array()は表示する内容です

2.initialLoad={false}にすると、スクロールしても何も表示されない、ちなみにコンソールも変化なし
3.ページサイズを変更したりすると、たまに表示される

該当のソースコード

React
1**再読み時に実行する関数**
2loadMore=(page)=>{
3    console.log(page)
4    let copyList = [...this.state.list];
5        copyList.push(Data[Math.floor(Math.random() * 6) + 1]);
6        console.log(copyList)
7        this.setState({ list: copyList });
8  }

React
1**表示する内容**
2 const item =<div className="row">
3    {/* 読み込み最中に表示する項目 */}
4    {this.state.list.map((value) => (
5      <div className="col-6 mt-4">
6        <img src={spot} className="w-100">
7        </img>
8      </div>
9    ))}
10  </div>

React
1**無限スクロール機能**
2<InfiniteScroll
3              loadMore={this.loadMore.bind(this)} //項目を読み込む際に処理するコールバック関数
4              hasMore={true} //読み込みを行うかどうかの判定
5              loader={loader}>
6              {item}
7</InfiniteScroll>