Бесконечное обновление состояния при реализации бесконечной прокрутки в React JS

Я хочу добавить в свой проект бесконечную прокрутку, но столкнулся с проблемой. Я получаю ошибку в консоли, что мое состояние обновляется очень часто. Я использую плагин: React Infinite Scroller. Если я правильно понимаю, при открытии страницы должна отображаться одна страница и запрашиваться функция gen_div, но возникает ошибка. Спасибо!

MyComponent {
    constructor(props) {
       super(props);
       this.state = {div_list: []}
    }

    gen_div() {
       var new_list = this.state.div_list;
       new_list.push(<div>1</div>);
       new_list.push(<div>2</div>);
       new_list.push(<div>3</div>);
       this.setState({div_list: new_list})
    }

    render() {
       return(
           <InfiniteScroll
             pageStart = {1}
             loadMore = {this.gen_div}
             hasMore = {true}
             loader=(<h4>Loading..</h4>)
            >
              {this.state.div_list}
            </InfiniteScroll>
       )
    }

}