hls.js sample video not working in react application

Question

player.jsx file

import React, { Component } from "react";
import Hls from "hls.js";

class Player extends Component {
  state = {};

  componentDidUpdate() {
    if (Hls.isSupported() && this.player) {
      const video = this.player;
      const hls = new Hls();
      hls.loadSource(
        "https://video-dev.github.io/streams/x36xhzz/x36xhzz.m3u8"
      );
      hls.attachMedia(video);
      hls.on(Hls.Events.MANIFEST_PARSED, function() {
        video.play();
      });
    }
  }

  render() {
    return (
      <div className="playerwrapper player">
        <div className="playerInner">
          <video
            className="videoCanvas"
            ref={player => (this.player = player)}
            autoPlay={true}
          />
        </div>
      </div>
    );
  }
}

export default Player;

when I compile it, it doesn't flash the sample video, instead, it throws an error in the console as

blob:http://localhost:3000/5ea277e7-0ac6-466a-9fe8-ba838935e82f:42 Uncaught TypeError: Cannot read property 'call' of undefined
    at __webpack_require__ (blob:http://localhost:3000/5ea277e7-0ac6-466a-9fe8-ba838935e82f:42)
    at Object.srcDemuxDemuxerWorkerJs (blob:http://localhost:3000/5ea277e7-0ac6-466a-9fe8-ba838935e82f:184)
    at __webpack_require__ (blob:http://localhost:3000/5ea277e7-0ac6-466a-9fe8-ba838935e82f:42)
    at webpackBootstrapFunc (blob:http://localhost:3000/5ea277e7-0ac6-466a-9fe8-ba838935e82f:170)
    at blob:http://localhost:3000/5ea277e7-0ac6-466a-9fe8-ba838935e82f:173

though I have installed, hls.js through npm i hls.js, it throws an error on loading though in network tab it receives the data chunks from load resource but failed to play video and through an error in the console