Issue while integrating with react js

[Shreyas-sonu]

Hi I am trying to add this plugin in my react app in I am getting error

this is my code

import videojs from "video.js";
import "video.js/dist/video-js.css";
import "@videojs/themes/dist/city/index.css";
import "videojs-contrib-quality-levels";
import qualitySelectorHls from "videojs-quality-selector-hls";

const videoJsOptions = {
autoplay: true,
controls: true,
responsive: true,
height: "500px",
disablePictureInPicture: true,
enableSmoothSeeking: true,
experimentalSvgIcons: true,
playbackRates: [0.5, 0.75, 1, 1.5, 2],
controlBar: {
skipButtons: {
backward: 10,
forward: 10,
},
qualitySelector: true
},
userActions: {
hotkeys: true,
},
sources: [
{
// src: "http://192.168.1.139:5000/hls/subject27/video-chunk/video-chunk_master.m3u8",
src: "http://192.168.1.87:5000/hls/abc/chunk1/chunk1_master.m3u8",
type: "application/x-mpegURL",
},
],
};

React.useEffect(() => {
if (!playerRef.current) {
const videoElement = document.createElement("video-js");
videojs.registerPlugin("qalitySelectorHls", qualitySelectorHls);
videoElement.classList.add("vjs-big-play-centered");
videoRef.current.appendChild(videoElement);

  const player = (playerRef.current = videojs(videoElement, options, () => {
    player.qualityLevels();
    videojs.log("player is ready");
    onReady && onReady(player);
    player.qualitySelectorHls({
      displayCurrentQuality: true,
      placementIndex: 13,
      vjsIconClass: "vjs-icon-hd",
    });
  }));

  player.on("play", () => {
    const playerCurrentTime = player.currentTime();
    console.log(
      playerCurrentTime ? "played" : "Started",
      playerCurrentTime
    );
  });
  player.on("pause", () => {
    const totalTime = player.duration();
    const playerCurrentTime = player.currentTime();
    console.log(playerCurrentTime == totalTime ? "Ended" : "paused");
  });
} else {
  const player = playerRef.current;
  player.autoplay(options.autoplay);
  player.src(options.sources);
  player.on("start", () => {
    console.log("start");
  });
}

}, [options, videoRef]);

dependency versions:
"video.js": "^8.12.0",
"videojs-quality-selector-hls": "^1.1.1"

error

videojs-quality-selector-hls.js?v=c0159efe:123 Uncaught TypeError: Cannot set properties of null (setting 'innerHTML')
at QualitySelectorHlsClass2.setButtonInnerText (videojs-quality-selector-hls.js?v=c0159efe:123:74)
at QualitySelectorHlsClass2.createQualityButton (videojs-quality-selector-hls.js?v=c0159efe:118:12)
at _Player. (videojs-quality-selector-hls.js?v=c0159efe:92:15)
at chunk-2KEIFEIH.js?v=c0159efe:13384:7

please help me resolve this issue