I am trying to filter subtitles from the subtitle list, and add in the track.

But what problem I am getting is, Initial selected video get two subtitle (duplicate) even there is one subtitle which is matched.

When I change the click on another video of, I still getting previous track as well as new one.

Even I click on video which doesnot have subtitle, I still subtitle of Initial one. What should I do to fix it?

"use client";
import { useGlobalContext } from "@/provider/state-manager";
import Video from "next-video";
import { useEffect, useState } from "react";
export default function VidPlayer({ selectedVideo}) {
  const { state }: Context = useGlobalContext();
  const Subtitles = state.subtitle || [];
  const [matchedSubtitle, setMatchedSubtitle] = useState<any>(null);

  useEffect(() => {
    const subtitle = Subtitles.find((data: any) =>
      selectedVideo?.name?.split(".")[0] === data?.name?.split(".")[0]
    );
    setMatchedSubtitle(subtitle || null);
  }, [selectedVideo, Subtitles]);


  return (
    <div>
      {selectedVideo?.url && (
        <Video
          src={selectedVideo?.url}
        >
          {matchedSubtitle && (
            <track
              key={matchedSubtitle.id}
              src={matchedSubtitle?.url}
              default
              kind="subtitles"
              srcLang="en"
              label="English"
            />
          )}
        </Video>
      )}
    </div>
  );
}