Why is react-three-drei's OrbitControls breaking when I use View with Routes?

Question

I am loading multiple 3D elements in my pages, so to avoid creating multiple canvases I use react-three-drei's View.
My <Canvas> is inside App.js and outside of my react-router-dom's <Routes>.

The problem is upon changing route the <OrbitControls> appear to break as I cannot move the object around with the mouse anymore.

App.js

export default function App() {
  const [canvasWrapperRef, canvasView1, canvasView2] = useRefs();
  const canvasRefs = { canvasView1, canvasView2 };

  return (
    <div className="App">
      <div ref={canvasWrapperRef}>
        <Suspense fallback={null}>
          <Routes>
            <Route path="/" element={<Homepage ref={canvasRefs} />} />
            <Route path="/other" element={<OtherPage ref={canvasRefs} />} />
          </Routes>
          <Canvas
            onCreated={(state) => {
              console.log("canvas created");
              state.events.connect(canvasWrapperRef.current);
            }}
            className="canvas"
          >
            <View track={canvasView1}>
              <Scene />
              <TransformControls>
                <Soda scale={6} position={[0, -1.6, 0]} />
              </TransformControls>
              <OrbitControls makeDefault />
            </View>
            <View track={canvasView2}>
              <color attach="background" args={["lightblue"]} />
              <Scene />
              <TransformControls position={[0, -1, 0]}>
                <Duck scale={2} position={[0, -1.6, 0]} />
              </TransformControls>
              <OrbitControls makeDefault />
            </View>
            <Preload all />
          </Canvas>
        </Suspense>
      </div>
    </div>
  );
}

function Scene() {
  return (
    <>
      <ambientLight intensity={1} />
      <Environment preset="dawn" />
    </>
  );
}

Homepage.js

const Homepage = React.forwardRef((props, ref) => {
  const { canvasView1, canvasView2 } = ref;

  return (
    <>
      <h1>Homepage</h1>
      <Link to="/other">Other Page</Link>
      <p>Position 1 - Bottle</p>
      <div ref={canvasView1} style={{ height: "100px", width: "100px" }} />
      <p>Position 2 - Apple</p>
      <div ref={canvasView2} style={{ height: "100px", width: "100px" }} />
    </>
  );
});

OtherPage.js

const OtherPage = React.forwardRef((props, ref) => {
  const { canvasView1, canvasView2 } = ref;

  return (
    <>
      <div ref={canvasView1} />
      <h1>Other Page</h1>
      <Link to="/">Homepage</Link>
      <br />
      <p>Position 3 - Duck</p>
      <div
        ref={canvasView2}
        style={{
          width: "100px",
          height: "200px",
          display: "inline-block"
        }}
      />
    </>
  );
});

I tried seeing if <Canvas> persists or not (as that could be the cause) by doing a console.log() on the onCreated property of <Canvas>, but it only logs once, so I assume it doesn't get unmounted when I switch pages, so that can't be the cause.

Thank you in advance for any suggestion.