Адаптивная прокрутка динамической прокрутки содержимого

Question

Я использовал response-custom-scrollbars для пользовательской прокрутки в моем приложении, наступает момент, данные будут динамическими, и прокрутка должна идти вниз или добавляются последние данные.

простая реакция-пользовательская полоса прокрутки выглядит следующим образом:

import { Scrollbars } from 'react-custom-scrollbars';

class App extends Component {
  render() {
    return (
      <Scrollbars style={{ width: 500, height: 300 }}>
        <p>Some great content...</p>
      </Scrollbars>
    );
  }
}

код выше работает нормально, в моем случае содержимое <p>Some great content...</p> является динамическим.

попытался добавить динамические данные и сделал сэто, реальная проблема возникла в свитке.Прокрутка должна перейти к элементу, добавленному недавно, и он работал, но после этого перестал работать встроенную функцию прокрутки.

Вы можете увидеть весь код здесь

обновленоgif вопроса:

Любая помощь в этом действительно приветствуется.