iOS Перепрокрутка в Safari подпрыгивает при повторном рендеринге компонента React

Question

Отскок прокрутки каждый раз, когда контейнер прокручивается и реагирует на рендеринг компонента. Как это исправить?

Воспроизвести : Сделать overscroll -> Подождать рендеринга компонента

function generateRandomArray () {
  return Array.from({ length: 50 }, () => Math.floor(Math.random() * 40));
}

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      list: generateRandomArray(),
      scroll: 0,
    };
    this.onScroll = this.onScroll.bind(this);
  }
  
  componentDidMount() {
    this.interval = setInterval(() => {
      this.setState(state => ({
        ...state,
        list: generateRandomArray(),
      }));
    }, 1000);
  }
  
  onScroll (e) {
    e.persist();
    this.setState(state => ({
      ...state,
      scroll: e.target.scrollTop,
    }));
  }
  
  render() {
    return (
      <div className="app">
        <div className="scroll">
          Scroll: {this.state.scroll}
        </div>
        <div className="scrollable" onScroll={this.onScroll}>
          <div className="list">
            {
                this.state.list.map(item => (<div className="item">{item}</div>))
                }
          </div>
        </div>
      </div>
    )
  }
}

ReactDOM.render(<App />, document.querySelector("#app"))

Полный пример (iOS Safari) : https://jsfiddle.net/twxqsr5p/show

iOS Подскакивающая прокрутка Safari