Rails + Webpacker-React, не могу установить currentTime видео в Active Storage

Question

Итак, у меня есть приложение (ссылка на репо), где пользователи могут загружать видео через Rails Active Storage для создания постов. Когда я просматриваю посты, я хочу, чтобы пользователи могли нажимать на метки времени, которые изменят текущее время видео поста и позволят им просматривать его. Мне удалось показать и показать видео, но я не могу его найти. Шаг за шагом вот что происходит:

Рельсы оказывают app/views/posts/_post_modal.html.haml модальный вид, который дает подробный вид поста с отзывами и советами при нажатии кнопки на посте. Ниже приведены строки 17-26, где подготовлен полезный груз для реакции. Я передаю path видео в качестве атрибута в <div id="owc-post-payload">

.modal-body.border-dark
  - reviews = Review.where(post_id: post.id)
  - tips = []
  - profiles = []
  - reviews.each do |review|
    - Tip.where(review_id: review.id).each { |tip| tips.push(tip) }
    - profiles.push(Profile.find(review.profile_id))
  #owc-post-payload{ post: post.to_json, video: rails_blob_path(post.video).to_json, reviews: reviews.to_json, profiles: profiles.to_json, tips: tips.to_json }
  #owc_post
  = javascript_pack_tag 'owc_post'

Затем состояние моего компонента инициализируется (управляется Redux). Половина государства в reviewsReducer.js, Другая половина находится в timestampReducer.js,

В app/javascript/owc_post, index.js оказывает App.js (ниже) в /components который оказывает VideoPlayer.js,

const App = (props) => (
  <div className='row'>
    <div className='col-xl-6 pr-3 sticky-top'>
      <div className='mb-2 sticky-top'>
        <VideoPlayer post={post.id} source={video} timestamp={props.timestamp} />
      </div>
      <button onClick={(e) => { props.dispatch(changeTime(15)) }}>=15</button>
      <button onClick={(e) => { props.dispatch(changeTime(30)) }}>=30</button>
      <button onClick={(e) => { props.dispatch(changeTime(45)) }}>=45</button>
    </div>
    <div className='col-xl-6'>
      ...
    </div>
  </div>
);

Вот в чем проблема. Когда я нажимаю одну из кнопок в <App/> ("=15", "=30", "=45"), state.timestampReducer изменения, которые также изменяются <VideoPlayer/> Реквизит (внизу). Это запускает componentDidUpdate() который запускает seek() внутри seek() Я четко вижу, что мой компонент обновляется через console.log() с, но свойство currentTime видео не изменится, и я понятия не имею, почему.

export default class VideoPlayer extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      source: props.source,
      timestamp: props.timestamp
    };
    this.videoRef = React.createRef();
  }

  componentDidUpdate(prevProps) {
    if (this.props !== prevProps) {
      this.setState(
        { timestamp: this.props.timestamp },
        () => { this.seek() }
      );
    }
  }

  seek = () => {
    console.log('inside seek')
    console.log(this.state.timestamp)
    console.log(this.videoRef.current)
    console.log('before: ' + this.videoRef.current.currentTime)
    this.videoRef.current.currentTime = this.state.timestamp;
    console.log('after: ' + this.videoRef.current.currentTime)
  }

  render() {
    return (
      <div>
        <video
          ref={this.videoRef}
          id='video-player'
          height='200px'
          type='video/mp4'
          controls>
          <source src={this.state.source} type='video/mp4' />
        </video>
      </div>
    );
  }
}

Здесь у меня есть снимок экрана, на котором я нажимаю разные кнопки и получаю обратную связь. Последний before: 0.752294 это когда я позволяю воспроизвести видео, а затем я нажимаю кнопку. CurrentTime всегда сбрасывается в 0 после нажатия кнопки.

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