React-Three-Fiber Drei - Swap between Orbit Controls, Map Controls, and Fly Controls

Question

I have an app where I would like to move between views when the user clicks a button. Here is what I have so far:

<Canvas >

  <FlyControls enableDamping={false} movementSpeed={3} rollSpeed={0.05} dragToLook={true}  makeDefault={props.cameraView==0} />
  <PerspectiveCamera position={[0,14,2]} heightMin={2} heightMax={2} fov={45} lookat={new THREE.Vector3(0,0,2)} makeDefault={props.cameraView==0} up={new THREE.Vector3(0,0,1)} />

  <MapControls enableDamping={false} movementSpeed={3} rollSpeed={0.01} dragToLook={true} makeDefault={props.cameraView==1}/>
  <OrthographicCamera position={[0,0,20]} zoom={40} fov={45} lookat={new THREE.Vector3(0,0,2)} makeDefault={props.cameraView==1} up={new THREE.Vector3(0,0,1)} />

  <OrbitControls enableDamping={false} makeDefault={props.cameraView==2} />
  <PerspectiveCamera fov={45} position={[posX-2,posY-2,1.5]} lookat={new THREE.Vector3(posX, posY, 1.5)} makeDefault={props.cameraView==2} up={new THREE.Vector3(0,0,1)} />

There are a couple of issues. First, when the orbit controls is not present, the fly controls and map controls work just fine. However, when the orbit controls is added, the app starts with orbit controls and cannot be changed. Second, the lookat and camera positions don't seem to change with the algorithm.

I have also tried this ...

  // Calculations for different camera setups
  let posX = props.currentFixture!=null ? props.fixtures[props.currentFixture]['positions'][0]-props.origin[0] : 0;
  let posY = props.currentFixture!=null ? props.fixtures[props.currentFixture]['positions'][1]-props.origin[1] : 0;
  let lookat = props.cameraView!=2 ? new THREE.Vector3(0,0,2) : new THREE.Vector3(posX, posY, 1.5)

  return (
    <Canvas >

      <FlyControls enableDamping={false} movementSpeed={3} rollSpeed={0.05} dragToLook={true}  makeDefault={props.cameraView==0} />
      <PerspectiveCamera position={[0,14,2]} heightMin={2} heightMax={2} fov={45} lookat={lookat} makeDefault={props.cameraView==0} up={new THREE.Vector3(0,0,1)} />

      <MapControls enableDamping={false} movementSpeed={3} rollSpeed={0.01} dragToLook={true} makeDefault={props.cameraView==1}/>
      <OrthographicCamera position={[0,0,20]} zoom={40} fov={45} lookat={lookat} makeDefault={props.cameraView==1} up={new THREE.Vector3(0,0,1)} />

      <OrbitControls enableDamping={false} makeDefault={props.cameraView==2} />

This has the same issues. It appears that you can't really have separate controls and disable orbit controls, but that can't be right.