I'm trying to use the fallback prop on the Canvas component to catch errors when WebGL is not supported as document here. However, when there is an error creating the WebGL context, I just see a blank white screen. I can see the contents in the Chrome DevTools, however it is not visible to the user. I assume this is because the fallback component is a child of the canvas element?

Here is a sample repo where I'm testing following code:

import { Canvas } from "@react-three/fiber";

export default function App() {
  return (
      <Canvas fallback={<div>Sorry no WebGL supported!</div>}>
        <mesh>
          <boxGeometry args={[2, 2, 2]} />
          <meshPhongMaterial />
        </mesh>
        <ambientLight intensity={0.1} />
        <directionalLight position={[0, 0, 5]} color="red" />
      </Canvas>
  );
}

This is what I see when try to load the page in Chrome with the --disable-webgl2 flag:

Here is what I see in the Chrome DevTools: