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

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);
});

Update:

A better way to disable on-video captions is to set the textTrackDisplay to false in the player options:

const player = videojs(videoEl, {
    //... other vjs options
    textTrackDisplay : false //Disable the textTrackDisplay component
});

See the full discussion here: https://github.com/videojs/video.js/discussions/8064 Example pen here: https://codepen.io/avtconnect/pen/dyqMJQN?editors=1010

Additionally, to avoid errors in console, new TextTrackDisplay should include options:

new TextTrackDisplay(player, {playerOptions : {}});