Прокрутите видео в React

Я создаю сайт на ReactJS. Я пытаюсь разместить видео на веб-странице, которую я могу пролистывать, прокручивая. Очень похоже на этот пример здесь: https://codepen.io/anon/pen/pKwQop

Мне интересно, как включить это в свой код. Моя первая попытка сделать это привела меня к этой ошибке: https://imgur.com/a/KfRgrmM

Вот мой код:

import React, { Component } from 'react';
import Navbar from '../components/GlobalNav';
import Footer from '../components/GlobalFooter';
import oculus from '../../public/static/video/oculus.mp4';

import './page2.css';

class Test extends Component {
    componentDidMount() {
        var vid = document.getElementById("Oculus");
        var frameNumber = 0;
        var playbackConstant = 500;
        var setHeight = document.getElementById("Test");

        vid.addEventListener('loadedmetadata', function() {
            setHeight.style.height = Math.floor(vid.duration) * playbackConstant + "px";
        });

        function scrollPlay() {
            var frameNumber = window.pageYOffset/playbackConstant;
            vid.currentTime = frameNumber;
            window.requestAnimationFrame(scrollPlay);
        }

        window.requestAnimationFrame(scrollPlay);
    }

    render() {
        return (
            <div className = "Test">
                <Navbar />
                <div className = "Site-content">
                    <video
                        tabIndex = "0"
                        autobuffer = "autobuffer"
                        preload = "preload"
                        className = "Oculus"
                    >
                        <source type = "video/mp4" src = {oculus} />
                    </video>
                </div>
                <Footer className = "Footer" />
            </div>
        )
    }
}

export default Test;