Setting up Plyr video player in react for hls

Question

I am building a livestreaming website, but I am having trouble with my video player. I want to have a nice video player that has livestream controls, such as autoplay, pause, play that bring you live, volume control and auto quality.

I seen some people do it with Plyr, so this is what I am trying to do. However, I am having trouble getting a video to show on my video player, here is what I have.

import React from 'react';
import Plyr from 'plyr';
import Hls from 'hls.js';
import 'plyr/dist/plyr.css';

const url = 'https://live.api.video/liqjASz1KXHCgp2gh8InxtB.m3u8';

class PlyrComponent extends React.Component {
    componentDidMount() {
        const video = document.querySelector('#player');
        const player = new Plyr(video);
        if (Hls.isSupported()) {
            const hls = new Hls();
            hls.loadSource(url);
            hls.attachMedia(video);
            player.on('play', () => hls.startLoad());
        }
    }

    render() {
        return <video preload="none" id="player" autoPlay controls crossOrigin />;
    }
}

export default PlyrComponent;

I am building my website with react, so this is the component I came with. Right now, it is not working, it simply loads with no video. I really need some help.

If you have other video player to recommend, let me know.

Thanks!