Пример видео hls.js не работает в приложении React

файл player.jsx

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;

когда я компилирую его, образец видео не мигает, а выдает ошибку в консоли как

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

хотя я установил hls.js через npm i hls.js, он выдает ошибку при загрузке, хотя на вкладке сети он получает фрагменты данных из ресурса загрузки, но не может воспроизвести видео и из-за ошибки в консоли