How does it work with React ? (specifically Next.js)

what i have tried so far :

import React, { Fragment, useState, useEffect } from 'react'
import videojsqualityselector from 'videojs-hls-quality-selector'
import 'videojs-contrib-quality-levels'
import dynamic from 'next/dynamic'

// react-video-js-player import
const VideoPlayer = dynamic(
    () => import('react-video-js-player'), { ssr: false }
)

const Index = (props) => {

    const [player, setPlayer] = useState(undefined)

    useEffect(() => {
        // react hook when player is ready
        if (player !== undefined) {
            player.hlsQualitySelector = videojsqualityselector;
            player.hlsQualitySelector({
                displayCurrentQuality: true,
            });
        }

    }, [player])

    const onPlayerReady = p => {
       // react-video-js-player states this returns a videojs instance
        console.log("Player is ready: ", p);
        setPlayer(p)
    }

    if (typeof window !== "undefined" && typeof window.navigator !== 'undefined') {
            return <VideoPlayer
                autoplay
                muted
                onReady={(p) => onPlayerReady(p)}
                bigPlayButton={false}
                controls={true}
                src={links['1080']}
                width="720"
                height="420"
            />
    }

    return (
        <Fragment>
            Hello World
        </Fragment>
    )
}
export default Index

The player shows and starts playing but it only has the default controls

[AbdelazizEid]

This worked for me

import React, { useRef, useState, useEffect } from 'react';
import videojs from 'video.js';
// those imports are important
import qualitySelector from 'videojs-hls-quality-selector';
import qualityLevels from 'videojs-contrib-quality-levels';

const VideoPlayer = ({ liveURL }) => {

  const videoRef = useRef();
  const [player, setPlayer] = useState(undefined);

  useEffect(() => {
    if (player) {
      player.src([liveURL]);
    }
  }, [liveURL]);

  useEffect(() => {
    const videoJsOptions = {
      preload: 'auto',
      autoplay: 'any',
      controls: true,
      fluid: true,
      responsive: true,
      sources: [
        {
          src: liveURL,
        },
      ],
    };

    videojs.registerPlugin('hlsQualitySelector', qualitySelector);
    const p = videojs(videoRef.current, videoJsOptions, function onPlayerReaady() {
      // console.log('onPlayerReady');
    });
    setPlayer(p);
    return () => {
      if (player) player.dispose();
    };
  }, []);

  useEffect(() => {
    if (player) player.hlsQualitySelector({ displayCurrentQuality: true });
  }, [player]);
  return (
    <div data-vjs-player>
      <video ref={videoRef} className="video-js vjs-default-skin vjs-big-play-centered"></video>
    </div>
  );
};

export default VideoPlayer;

[DipeshGod]

@AbdelazizEid can you share your package.json or the version of videojs, videojs-hls-quality-selector, videojs-contrib-quality-levels