How to use videojs in React

import React from 'react';
import videojs from 'video.js'
import 'video.js/dist/video-js.css';

export default class VideoPlayer extends React.Component {
    createPlayer() {
        // instantiate Video.js
        this.player = videojs(this.videoNode, this.props, function onPlayerReady() {
            //console.log('onPlayerReady', this)
        });
    }

    disposePlayer() {
        if (this.player) {
            this.player.dispose()
        }
    }

    componentDidMount() {
        this.createPlayer()
    }

    componentWillUnmount() {
        this.disposePlayer()
    }

    componentDidUpdate(prevProps) {
        if (this.props.sources != prevProps.sources) {
            this.player.src(this.props.sources[0])
        }
    }

    // wrap the player in a div with a `data-vjs-player` attribute
    // so videojs won't create additional wrapper in the DOM
    // see https://github.com/videojs/video.js/pull/3856
    render() {
        return (
            <div data-vjs-player>
                <video
                    ref={node => this.videoNode = node}
                    className="video-js vjs-big-play-centered w-full"
                    data-setup='{ "playbackRates": [0.5, 1, 1.25, 1.5, 1.75, 2], "fluid": true }'>
                </video>
            </div>
        )
    }
}