Select Dash file Bitrates Manually in react-player

Question

I'm using React-player in the project and my task is streaming MPD (DASH) files with resolution switcher feature.

based on DASHjs document first I used getBitrateInfoListFor("video") to get all available bitrates and then I disabled auto bitrate swithcer by this code:

ref.current.player
      .getInternalPlayer("dash")
      .updateSettings({
        streaming: { abr: 
        { autoSwitchBitrate: 
          { video: false } 
        } }
      });

and for the final step I set new quality with setQualityFor:

ref.current.player.getInternalPlayer("dash").setQualityFor("video", qualityIndex);

but it doesn't work!

the whole of the code:

let ref = React.createRef();
  const [VidQuality, setVidQuality] = React.useState(null);

  const getDashData= dash => {
    console.log(dash);
    setVidQuality(dash);
  };
  const updateQuality = e => {
    VidQuality?.getBitrateInfoListFor("video")?.forEach(
      quality => {
        if (quality.height === +e.target.innerHTML) {
          ref.current.player.getInternalPlayer("dash").updateSettings({
            streaming: { abr: { autoSwitchBitrate: { video: false } } }
          });
          ref.current.player
            .getInternalPlayer("dash")
            .setQualityFor("video", quality.qualityIndex);
        }
      }
    );
  };
  return (
    <div>
      <ReactPlayer
        ref={ref}
        url="VIDEO_URL.mpd"
        controls
        width="100%"
        height="100%"
        onReady={() => {
          getDashData(ref?.current?.player?.player?.dash);
        }}
      />
      <div>
        <h2>video qualities</h2>
        {VidQuality?.getBitrateInfoListFor("video")?.map(qualities => (
          <button classes="primary radius" onClick={updateQuality}>
            {qualities.height}
          </button>
        ))}
      </div>
    </div>
  );

and here is stackblitz link