On conditional render change "Can't perform a React state update on an unmounted component"

[spikethea]

When I use React conditional rendering to change scene, i get this error

can't perform a React state update on an unmounted component. This is a no-op, but it indicates...

this is how i currently change state (will be probably changed to something like switch case but its a if else statement for now)

const StageSelector = () => {

    const currentStage = useSelector(state => state.info.activeStage);

    const stageSelect = currentStage.id

    console.log(stageSelect);

    const [stageLoad, setStageLoad] = useState(false);

    useEffect(()=>setStageLoad(true)
    , [currentStage])

    
      if (stageSelect === 0) {
            return (
              <HealthAndSafety/>
            
          )} 
        else if (stageSelect === 1) {
            return (
            <Allergies/>
        )
      }
     else return (
      <Overworld/>
      )
    

    
}

and the scenes im swapping look like this

const Overworld = () => {

   const dispatch = useDispatch();
   const transformBoxZ = useSelector(state => state.counter);

   const [cameraPos, setCameraPos] = useState([0, 100, 250]);
   const [cameraFov, setCameraFov] = useState(10);

   
   


   return (

       <Canvas
       colorManagement 
       camera={{position: cameraPos, fov: cameraFov}}
       onCreated={({ gl }) => gl.setClearColor('lightpink')}
       shadowMap
       >
       
           <Lights/>
           <RotatingBox
           transformBoxZ={transformBoxZ}
           onHover={() => dispatch(showUserInterface('SHOW_UI'))}
           />
           <Person onClick={()=> dispatch(showInfo("fireExtinguisher")) }/>
           <Person onClick={()=> dispatch(showInfo("puddle"))}/>
           <Person onClick={()=> dispatch(getBadge("goodEye"))}/>
           <Person onClick={()=> dispatch(getBadge("oneHundredPercent"))}/>
           
           <Floor onClick={()=> setCameraFov(cameraFov + 15)}/>
       
       <OrbitControls/>
     </Canvas>
   )
}

and this

const HealthAndSafety = () => {

    const dispatch = useDispatch();
    const transformBoxZ = useSelector(state => state.counter);
    
    console.log(window.innerHeight);
    
  
    const vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0)
    const vh = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0)

    return (
      <>        
        <Canvas
        style={{position:"fixed", left:"0%", top:"0%"}}
        className={"canvas"}
        colorManagement 
        onCreated={({ gl }) => gl.setClearColor('coral')}
        shadowMap
        
        >
          <Camera onScroll={console.log("scrolling")}/>
            <Lights/>
            <RotatingBox
            transformBoxZ={transformBoxZ}
            onClick={() => dispatch(showUserInterface('SHOW_UI'))}
            onHover={console.log("reached")}
            />
            
            <Floor/>
        
      </Canvas>
      </>
    )
}

Is there a problem with the way that I am swapping scenes?