how can i use Plyr react for streaming hls files on mobile?

[samboura]

hello, im building a hls steaming website to improve my coding skills and for educational purposes and im trying to make it responsive so that the site works on mobile too. I used an already given TS code to implement plyr on the site with quality options and it works really well in desktop but in mobile it says "HLS is not supported" and i tried to work it out but i got stuck cause im new to HLS streaming video files so if anyone can help me i'd be so grateful.

the code i used: (path comes as props from parent component)

https://github.com/samboura/HLS-player/blob/main/HLS-Plyr.tsx