interaction between requestfullscreen and getDisplayMedia in chrome

Question

Using chrome, it seems like getDisplayMedia and requestFullscreen don't play well together when (1) a tab is selected for capture, and (2) an element on that tab requests fullscreen. At this point chrome will display this weird windowed version of the tab instead.

Has anyone encountered this issue before or have any way to work around it? You can use this rough fiddle to reproduce.

const TodoApp = () => {
    const requestFullscreen = () => {
    document.body.requestFullscreen()
  }
  const share = () => {
    navigator.mediaDevices.getDisplayMedia()
        .then((stream) => {
        window.stream = stream
        console.log('success', stream)
      })
      .catch((err) => {
        console.log('err', err)
      })
  }
    return (
    <div>
      <button onClick={requestFullscreen}>requestFullscreen</button>
      <button onClick={share}>Share</button>
      <video id='video' autoPlay={true}></video>
    </div>
  )
}

window.stream = {active: false}
window.lastActive = false

window.setInterval(() => {
    console.log('active: ', window.stream.active)
  if (window.stream.active !== lastActive) {
    if (window.stream.active) {
        document.querySelector('video').srcObject = window.stream
    } else {
        document.querySelector('video').srcObject = null
    }
    lastActive = window.stream.active
  }
}, 5000)
ReactDOM.render(<TodoApp />, document.querySelector("#app"))

Sorry if this has been asked before but I couldn't find it.