title: Why is react-three-drei's OrbitControls breaking when I use View with Routes?
body: <p>I am loading multiple 3D elements in my pages, so to avoid creating multiple canvases I use <em>react-three-drei</em>'s <a href="https://github.com/pmndrs/drei#view" rel="nofollow noreferrer">View</a>.<br />
  My <code>&lt;Canvas&gt;</code> is <strong>inside</strong> <code>App.js</code> and <strong>outside</strong> of my <em>react-router-dom</em>'s <code>&lt;Routes&gt;</code>.</p>
  <p>The problem is upon changing route the <code>&lt;OrbitControls&gt;</code> appear to break as I cannot move the object around with the mouse anymore.</p>
  <p><a href="https://i.stack.imgur.com/4Hqee.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4Hqee.gif" alt="enter image description here" /></a></p>
  <h4><code>App.js</code></h4>
  <pre class="lang-js prettyprint-override"><code>export default function App() {
    const [canvasWrapperRef, canvasView1, canvasView2] = useRefs();
    const canvasRefs = { canvasView1, canvasView2 };
  
    return (
      &lt;div className=&quot;App&quot;&gt;
        &lt;div ref={canvasWrapperRef}&gt;
          &lt;Suspense fallback={null}&gt;
            &lt;Routes&gt;
              &lt;Route path=&quot;/&quot; element={&lt;Homepage ref={canvasRefs} /&gt;} /&gt;
              &lt;Route path=&quot;/other&quot; element={&lt;OtherPage ref={canvasRefs} /&gt;} /&gt;
            &lt;/Routes&gt;
            &lt;Canvas
              onCreated={(state) =&gt; {
                console.log(&quot;canvas created&quot;);
                state.events.connect(canvasWrapperRef.current);
              }}
              className=&quot;canvas&quot;
            &gt;
              &lt;View track={canvasView1}&gt;
                &lt;Scene /&gt;
                &lt;TransformControls&gt;
                  &lt;Soda scale={6} position={[0, -1.6, 0]} /&gt;
                &lt;/TransformControls&gt;
                &lt;OrbitControls makeDefault /&gt;
              &lt;/View&gt;
              &lt;View track={canvasView2}&gt;
                &lt;color attach=&quot;background&quot; args={[&quot;lightblue&quot;]} /&gt;
                &lt;Scene /&gt;
                &lt;TransformControls position={[0, -1, 0]}&gt;
                  &lt;Duck scale={2} position={[0, -1.6, 0]} /&gt;
                &lt;/TransformControls&gt;
                &lt;OrbitControls makeDefault /&gt;
              &lt;/View&gt;
              &lt;Preload all /&gt;
            &lt;/Canvas&gt;
          &lt;/Suspense&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    );
  }
  
  function Scene() {
    return (
      &lt;&gt;
        &lt;ambientLight intensity={1} /&gt;
        &lt;Environment preset=&quot;dawn&quot; /&gt;
      &lt;/&gt;
    );
  }
  </code></pre>
  <h4><code>Homepage.js</code></h4>
  <pre class="lang-js prettyprint-override"><code>const Homepage = React.forwardRef((props, ref) =&gt; {
    const { canvasView1, canvasView2 } = ref;
  
    return (
      &lt;&gt;
        &lt;h1&gt;Homepage&lt;/h1&gt;
        &lt;Link to=&quot;/other&quot;&gt;Other Page&lt;/Link&gt;
        &lt;p&gt;Position 1 - Bottle&lt;/p&gt;
        &lt;div ref={canvasView1} style={{ height: &quot;100px&quot;, width: &quot;100px&quot; }} /&gt;
        &lt;p&gt;Position 2 - Apple&lt;/p&gt;
        &lt;div ref={canvasView2} style={{ height: &quot;100px&quot;, width: &quot;100px&quot; }} /&gt;
      &lt;/&gt;
    );
  });
  </code></pre>
  <h4><code>OtherPage.js</code></h4>
  <pre class="lang-js prettyprint-override"><code>const OtherPage = React.forwardRef((props, ref) =&gt; {
    const { canvasView1, canvasView2 } = ref;
  
    return (
      &lt;&gt;
        &lt;div ref={canvasView1} /&gt;
        &lt;h1&gt;Other Page&lt;/h1&gt;
        &lt;Link to=&quot;/&quot;&gt;Homepage&lt;/Link&gt;
        &lt;br /&gt;
        &lt;p&gt;Position 3 - Duck&lt;/p&gt;
        &lt;div
          ref={canvasView2}
          style={{
            width: &quot;100px&quot;,
            height: &quot;200px&quot;,
            display: &quot;inline-block&quot;
          }}
        /&gt;
      &lt;/&gt;
    );
  });
  </code></pre>
  <p>I tried seeing if <code>&lt;Canvas&gt;</code> persists or not (as that could be the cause) by doing a <code>console.log()</code> on the <code>onCreated</code> property of <code>&lt;Canvas&gt;</code>, but it only logs once, so I assume it doesn't get unmounted when I switch pages, so that can't be the cause.</p>
  <p><a href="https://codesandbox.io/s/react-router-v6-example-forked-hew70i?fontsize=14&amp;hidenavigation=1&amp;theme=dark" rel="nofollow noreferrer"><img src="https://codesandbox.io/static/img/play-codesandbox.svg" alt="Edit react router v6 example (forked)" /></a></p>
  <p>Thank you in advance for any suggestion.</p>