Can't seek through video from Rails Active Storage with Rails-Webpacker React Frontend

Okay so I'm having an issue with seeking through videos in my react components with Rails Webpacker. I can make them play but I can't seek through them.

I'm using Rails Active Storage to upload the videos then sending their urls to my react component via an html attribute rendered by rails_blob_path(@post.video) (see below snippet on step 9). In my react component I have a <video /> element with the source being that parsed attribute. From there I have methods that control the element via a React.createRef(). One of the methods (play()) works as expected. However, my seek() method does not and I don't understand why.

I made a minified example (repo) to isolate the problem and here are the following steps I took:

1. rails new [app] --webpacker=react
2. cd into [app], rails active_storage:install
3. rails g scaffold post title:string
4. rails db:migrate
5. add line has_one_attached :video to app/models/post.rb
6. add :video to white-listed params in app/controllers/posts_controller.rb
7. add below snippet as a form field in app/views/posts/_form.html.erb

<div class="field">
  <%= form.label :video %>
  <%= form.file_field :video %>
</div>

9. add below to app/views/posts/show.html.erb

<div id='payload' url='<%= rails_blob_path(@post.video).to_json %>'></div>
<div id='hello-react'></div>
<%= javascript_pack_tag 'hello_react' %>

10. change app/javascript/packs/hello_react.jsx to have:

import React from 'react'
import ReactDOM from 'react-dom'

const node = document.getElementById('payload')
const url = JSON.parse(node.getAttribute('url'))

class App extends React.Component {

  componentWillMount() {
    this.videoRef = React.createRef()
  }

  seek = (seekTo = 0) => {
    this.videoRef.current.currentTime = seekTo
  }

  play = () => {
    this.videoRef.current.play()
  }

  render() {
    return (
      <div>
        <video ref={this.videoRef} controls>
          <source src={url} type='video/mp4' />
        </video>
        <button onClick={ (e) => {this.seek(5)} }>+5</button>
        <button onClick={ (e) => {this.play()} }>Play</button>
      </div>
    )
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('hello-react')
)

11. start the server with rails s, go to localhost:3000/posts/new
12. create a post (you'll need a video to upload), you'll be redirected on submitting to the hello-react pack.

I've posted this before but have not gotten an answer. This is the first time I've made a separate project and outline of the steps to isolate the issue. Hopefully that relays how desperate I am. Please let me know if I need to explain any steps or if you all need anymore info. Thank you all in advance for your help.

from Can't seek through video from Rails Active Storage with Rails-Webpacker React Frontend