Как остановить Interia Stop Scroll, когда мое приложение отображает новые элементы в конце прокрутки?

Question

У меня есть приложение, которое отображает больше комментариев от jsonplaceholder, когда прокрутка достигает конца комментариев (после однократного нажатия кнопки загрузки). Моя проблема в том, что когда я прокручиваю вниз, сначала реакция отрисовывает DOM, но инерция прокрутки продолжает двигаться, иногда вызывает дублирование и много дрожания.

Есть ли способ остановить прокрутку в этом положении нагрузки, чтобы импульс / инерция не переносился после добавления новых элементов?

полный код: codesandbox

частичный код:

  constructor(props) {
    super(props);
    this.state = { data: {}, loading: true, loaded: [0, 10] };
    this.loadMore = this.loadMore.bind(this);
  }


 handleScroll = e => {
    const bottom =
      e.target.scrollHeight - e.target.scrollTop === e.target.clientHeight;
    if (bottom) {
      setTimeout(() => this.loadMore(), 0); /*previously, attempt to use setTimeout to mitigate
 the effects if set to 500ms, but still shows symptoms. dont think its a good solution either */
    }
  }; //load on scroll

 render() {
    const { data, loading } = this.state;
    if (loading) {
      return <div>loading...</div>;
    }
    return (
      <div className="commentBox" onScroll={this.handleScroll}>
        {data.map(item => (
          <p key={item.id}> {item.body} </p>
        ))}
        <button onClick={this.loadMore}>load more</button>
      </div>
    );
  }
}