Adding subtitles in React Player?

i am trying to add subtitles in React Player component , Here is the code for react player component

  <ReactPlayer
          url={vidData.media[0]}
          controls={true}
          width={"100%"}
          height={"auto"}
          playing={playVid}
          muted={true}
          className="react-workout-player"
          config={{
            file: {
              attributes: {
                crossOrigin: "true",
              },
              tracks: [
                {
                  kind: "subtitles",
                  src: "https://prod.fitflexapp.com/files/captions/2021/11/18/23-b2j0oOsJ.vtt",
                  srcLang: "en",
                  default: true,
                },
              ],
            },
          }}
        />

i cant understand what i am doing wrong as they are not appearing on the video. kindly help

Answer

Create a State for an array For your subtitles

const [captions_arr, setCaptions] = useState([]);

yout captions_arr should have objects like this

  {kind: 'subtitles', src: 'subs/subtitles.en.vtt', srcLang: 'en', default: true},

Extract the part which you need from this array , I mapped it in a new Array

    var mySubtitle_arr= captions_arr.map((v) => ({
    kind: v.kind,
    src: v.src,
    srcLang: v.file_lang_code,
  }));

After Mapping pass this array to your react Player component

 <ReactPlayer
            config={{
              file: {
                attributes: {
                  crossOrigin: "true",
                },
                tracks: mySubtitle_arr,
              },
            }}
            url={'YOUR_VIDEO_URL'}
            controls={true}
            width={"100%"}
            height={"auto"}
            playing={'YOUR_PLAYING_STATE'}
            muted={true}
           
          />