Реагировать на бесконечную прокрутку - отображаются двойные полосы прокрутки - мне нужна только полоса прокрутки окна

Я пытаюсь реализовать бесконечную прокрутку для React.js. Все работает нормально, Кроме Я хочу иметь возможность использовать полосу прокрутки окна, чтобы активировать бесконечную прокрутку. Код на данный момент имеет 2 полосы прокрутки (мне нужна только одна).

Здесь дан ответ на код из stackoverflow, я прочитал его полный ответ, я попытался установить высоту на 100%, но из-за этого бесконечная прокрутка не работает. : Stackoverflow - ответил Аникет Джа (самый длинный ответ с 4 голосами)

• Двойная прокрутка происходит, когда я визуализирую это таким образом:

  <div>
  <First />
   <div ref = "iScroll" style = {{ height: "100vh", overflow: "auto"}}>
      <ul>
        {this.displayItems()}
      </ul>
      {this.state.loadingState ? <p className = "loading"> loading More 
       Items..</p> : ""}
    </div>
  </div>
  

У меня есть ссылка на Codepen, если это поможет

class Layout extends React.Component {
  constructor(props) {
   super(props);
   this.state = {
      items: 30,
      loadingState: false
    };
  }

  componentDidMount() {
    this.refs.iScroll.addEventListener("scroll", () => {
      if (this.refs.iScroll.scrollTop + this.refs.iScroll.clientHeight >= this.refs.iScroll.scrollHeight - 20){
        this.loadMoreItems();
      }
    });
  }

  displayItems() {
    var items = [];
    for (var i = 0; i < this.state.items; i++) {
      items.push(<li key = {i}>Item {i}</li>);
    }
    return items;
  }

  loadMoreItems() {
     if (this.state.loadingState){
         return;
     }
    this.setState({ loadingState: true });
    setTimeout(() => {
      this.setState({ items: this.state.items + 10, loadingState: false });
    }, 1000);
  }

  render() {
    return (<div>

        <First />
          <div ref = "iScroll" style = {{ height: "100vh", overflow: "auto"}}>
            <ul>
              {this.displayItems()}
            </ul>
            {this.state.loadingState ? <p className = "loading"> loading More Items..</p> : ""}
          </div>
        </div>
    );
  }
}

class First extends React.Component {
  constructor(props) {
   super(props);
   this.state = {

    };
  }

  render() {
    return (
      <h1>Testing</h1>

    )
  }
}

ReactDOM.render(<Layout />, document.getElementById('example'));