Having issue adding Captions

[HariShankarS]

The text tracks I am adding to the videojs player are not being displayed in the player.

I could add remoteTextTrack and I could see the cues being added to the Text track in the console, but for all the cues the displayState is showing as undefined, which is the reason the captions are not rendering. Couldn't understand why this is happening.

This is how I am adding :

playerRef.remoteTextTracks().tracks_.forEach(remoteTrack => {
  const currCue = new VTTCue(stTime, enTime, "HARI SHANKAR");
  remoteTrack.addCue(currCue);
});

This is the response I am getting in the console for the
VTTCue:

0: VTTCue
addEventListener: ƒ addEventListener()
align: "middle"
dispatchEvent: ƒ dispatchEvent()
displayState: undefined
endTime: 5
hasBeenReset: false
id: ""
line: "auto"
lineAlign: "start"
onenter: null
onexit: null
originalCue_: VTTCue {vertical: "", snapToLines: true, line: "auto", position: "auto", size: 100, …}
pauseOnExit: false
position: 50
positionAlign: "middle"
region: null
removeEventListener: ƒ removeEventListener()
size: 50
snapToLines: true
startTime: 0
text: "HARI SHANKAR"
track: null
vertical: "" 

I have also tried by adding VTT file using <track> as :

<video ref={node => (this.videoNode = node)} className="video-js">
  <track kind="captions" src="/sample.vtt" srcLang="en-US"label="English" />
</video>

even this way I couldn't get any captions. Can someone help ?