plyr.io captions dont load nextjs typescript

Question

i am trying to load captions into plyr.io video player using the Plyr package but they dont show up, their div ".plyr___caption" stays empty the entire time.

"use client";

import React, { useEffect } from "react";
import Plyr from "plyr";
import Link from "next/link";
import Image from "next/image";

import "@/utils/plyr.css";

// import "./VideoPage.css";
import { movies } from "@/data/movies";
import Script from "next/script";

interface Props {
  video: any;
  videoUrl: string;
}

const VideoPage = ({ video, videoUrl }: Props) => {
  const otherMovies = movies.filter((movie) => movie.title !== video.title);

  const player = new Plyr("#player");

  const currentMovie = movies.find((movie) => movie.title === video.title);

  return (
    <div className="movie-details-container">
      <div className="video-player-container">
        {/* @ts-ignore  */}
        <video
          id="player"
          playsInline
          controls
          data-poster="/path/to/poster.jpg"
        >
          <source
            src="https://bafybeied2pv4imi4fjk7yefkia3egpcbdlyvs2itscwwdh6hqdtw4txgr4.ipfs.w3s.link/ipfs/bafybeied2pv4imi4fjk7yefkia3egpcbdlyvs2itscwwdh6hqdtw4txgr4/BLEACH%20-%20Movie%2001%20-%20Memories%20of%20Nobody.mp4"
            type="video/mp4"
          />
          <source src="/path/to/video.webm" type="video/webm" />

          <track
            kind="captions"
            label="English captions"
            src="./subtitles.vtt"
            srcLang="en"
            default
          />
        </video>
      </div>
    </div>
  );
};

export default VideoPage;

the weird thing is that it works when i try it somewhere else in an empty project, so i suspect it has something to do with nextjs or with the Plyr package