Горизонтальная автоматическая прокрутка до компонента React

У меня есть приложение React, в котором я визуализирую выборку из горизонтального списка. В любой момент времени активен один черновой выбор, но в определенный момент он делается, а затем становится активным следующий. Когда следующий станет активным, я бы хотел, чтобы список автоматически прокручивался по горизонтали, чтобы активный выбор всегда был в поле зрения.

Я уверен, что об этом уже спрашивали, но я действительно не знаю, как вызвать событие автопрокрутки для компонента React.

Вот код, который у меня есть:

DraftOrder.js:

class DraftOrder extends React.Component {
  render() {
    return (
      <React.Fragment>
        <div className = "d-flex flex-row auto-scroll-x">
          {this.props.draftPicks.map(aDraftPick => {
            return <ADraftPickInOrder key = {v4()} draftPick = {aDraftPick} team = {this.props.team} />
          })}
        </div>
      </React.Fragment>
    );
  }
}

ADraftPickInOrder.js:

class ADraftPickInOrder extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      active: this.props.draftPick.active
    }
    this.renderUserName = this.renderUserName.bind(this);
    this.renderDraftedPlayer = this.renderDraftedPlayer.bind(this);
  }


  renderUserName() {
     ...
  }

  renderDraftedPlayer() {
    ...
  }

  render() {
    return (
      <div className = "text-center px-3">
        <div className = {classnames("font-weight-bold no-wrap", { "text-success" : this.props.draftPick.team.id === this.props.team.id } )}>{this.props.draftPick.team.name}</div>
        {this.renderUserName()}
        {this.renderDraftedPlayer()}
        <div><small>{formatDraftPickNumber(this.props.draftPick)}</small></div>
      </div>
    );
  }
}

Любая помощь приветствуется!