Two freeCameras in one Viewport using React?

Questions
1

Hi there, i am trying to get two cameras in one viewport so that i can actually see the scene from two perspectives, like in this example but with freeCameras: https://brianzinn.github.io/react-babylonjs/examples/basic/viewport/

this is what i have done:

export const BabylonEnv = () => {
  const scene = useScene();
  const viewPort1 = new BABYLON.Viewport(0, 0.5, 1, 1);
  const viewPort2 = new BABYLON.Viewport(0, 0, 1, 0.5);

  return (
    <div style={{ flex: 1, display: "flex" }}>
      <Engine antialias canvasId="babylonJS" height={250}>
        <Scene>
          <ground name="ground" width={500} height={500} subdivisions={1} />

          <hemisphericLight
            name="light1"
            intensity={0.7}
            direction={Vector3.Up()}
          />
          <freeCamera
            name="camera1"
            position={new Vector3(0, 100, -500)}
            setTarget={[Vector3.Zero()]}
            viewport={viewPort1}
          />
          <freeCamera
            name="camera2"
            position={new Vector3(0, 100, -200)}
            setTarget={[Vector3.Zero()]}
            viewport={viewPort2}
          />
          {/* <Drawing/> */}
          <Map />
        </Scene>
      </Engine>
    </div>
  );
};

but it only shows one viewport. Whats wrong here?

thanks a lot!

2

viewPort1 is extending beyond the screen (it starts at y=0.5 and has a height of 1), so it might just be rendering out of view?