I am trying to load a live stream using an m3u8 playlist. I tried with HTML audio/video tags and also react-audio-player, but nothing works.

DOMException: Failed to load because no supported source was found.

What am I missing? Do i need a saperate package to play m3u8 file?

import "./styles.css";
import { useState, useEffect } from "react";
import { useRef } from "react";
export default function App() {
  const playerRef = useRef();

  const handleAlbumClick = () => {
    if (playerRef.current) {
      console.log(playerRef);
      try {
        playerRef.current.src =
          "https://dai2.xumo.com/xumocdn/p=roku/amagi_hls_data_xumo1212A-xumo-nbcnewsnow/CDN/playlist.m3u8";
        playerRef.current.load();
        playerRef.current.play();
      } catch (e) {
        console.log(e.message);
      }
    }
  };
  return (
    <div className="App">
      <video controls ref={playerRef} autoPlay>
        <source src="" />
      </video>
      <button onClick={handleAlbumClick}>Play</button>
    </div>
  );
}

`