When I try and add video text tracks to videoJs player, it adds them in the wrong order where the new track appears above the previous track.

I have created a jsFiddle to show this, can anyone help solve how I fix this?

https://jsfiddle.net/ts9qogdh/3/

  <video id="my_video_1" class="video-js vjs-default-skin" controls preload="auto" width="640" height="268" 
  data-setup='{ }' muted>
    <source src="http://vjs.zencdn.net/v/oceans.mp4" type='video/mp4'>
  </video>

var currPlayer = videojs("my_video_1")

currPlayer.play()
currPlayer.addTextTrack("captions", 'english', 'en');

window.setInterval(() => {
  let currentTime = currPlayer.currentTime();
  const activeCue = new VTTCue(currentTime, currentTime + 2, currentTime + 2)

  var tracks = currPlayer.textTracks();
  let existing = tracks.tracks_.find(x => x.kind === 'captions' && x.language === 'en');

  existing.mode = 'showing';
  existing.addCue(activeCue);
}, 1000)