Video.js: How to display captions only on custom TextTrackDisplay element, not on top of video - video.js

Question

I'm attempting to display Video.js captions on a custom DOM element, outside of the video playing. This works as intended and below are snippets showing this.
Unfortunately, I can't seem to disable captions appearing also on top of the video too. Is there a way to disable captions appearing/showing on top of the video and only in the TextTrackDisplay element?
Any setting in the caption options (addRemoteTextTrack(options)) and textTrackSettings.setValues() seems to affect both on-video and custom captions.
let captionOption = {
kind: 'captions',
srclang: 'en',
label: 'English',
src: subURL,
mode: 'showing',
};
connectTextTracks = (player) => {
const TextTrackDisplay = videojs.getComponent('TextTrackDisplay');
const textTrackDisplay = new TextTrackDisplay(player);
subtitleDiv.appendChild(textTrackDisplay.el());
}
player.ready(function () {
player.addRemoteTextTrack(captionOption);
const tracks = player.remoteTextTracks();
console.log(tracks.length); // print out greater than 0 if captions exists
var settings = this.textTrackSettings;
settings.setValues({
backgroundColor: '#000',
backgroundOpacity: '1',
edgeStyle: 'uniform',
});
settings.updateDisplay();
connectTextTracks(player);
});

Answer 1

I ended up just hiding the on-video text track display, before creating a new TextTrackDisplay, like so:
// First hide main text track display (on-video)
const mainTextTrackDisplay = player.getChild('TextTrackDisplay');
mainTextTrackDisplay.setAttribute("hidden", true);
// Add new text track display
const TextTrackDisplay = videojs.getComponent('TextTrackDisplay');
const newTextTrackDisplay = new TextTrackDisplay(player);
const newTextTrackDisplayEl = newTextTrackDisplay.el();
// Append new text track display to subdiv element
const subDiv = document.querySelector("#subdiv");
subDiv.append(newTextTrackDisplayEl);
Full example here:
https://codepen.io/avtconnect/pen/poOvEyj