How do I remove the top bar that appears when sharing a tab using getDisplayMedia on Chrome?

Question

when sharing a tab on Chrome using the getDisplayMedia function it will push the webpage down to display a bar indicating you are sharing one of your tabs in all of your tabs. This is shown below:

Shared tab:

Tab used to share:

Random Tab:

How do I hide this bar?

I have tried the surfaceSwitching property on the mediaStream constraints but that just gets rid of this button that is initially there if you don't specify it (see below).

I've looked online and found two others asking the same question on the chrome support forums but they were closed with no replies on them...

How do you disable the "sharing this tab" message in Chrome
Sharing tab alert never going away

Is it even possible to hide this bar?

Here is the code I'm using:

// Function for creating MediaStreams
async function start(constraints) {
    let MediaStream = null;
    try {
        MediaStream = await navigator.mediaDevices.getDisplayMedia(constraints);
    } catch (err) {
        console.error(`Error: ${err}`);
    }
    return MediaStream;
}


/* EVENT LISTENERS */

// When the capture button is clicked
capture.addEventListener("click", async () => {

    const constraints = {
        video: {
            frameRate: 30,
            width: 1920,
            height: 1080,
            cursor: "always"
        },
        audio: {
            autoGainControl: false,
            echoCancellation: false,
            googAutoGainControl: false,
            noiseSuppresion: false
        },
        surfaceSwitching: "exclude"
    }
    
    // Create MediaStream
    let captureStream = await start(constraints);

    // Update frontend
    localVideo.srcObject = captureStream;

    // Connect to remote peer
    for (const track of captureStream.getTracks()) {
        pc.addTrack(track, captureStream);
    }

})

Useful links:
https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getDisplayMedia

Thanks,

~Naitzirch