changing both camera and controls dynamically based on a state for a view!

[awsdang]

with @react-three/fiber react-three/drei
i still cant get this right,
so i have a canvas inside it a view,
I want this view to change its camera and camera controls based on a state i have,
I was able to change the controls independantly, I also was able to change the camera without refreshing,
now when I want to change both the camera and controls, it seems like something is off

Camera Component has:

<Ortho/>
<Perspective/>

Controls Component from @react-three/drei

<MapControls/>
<CameraControls/>

main three app:

<Canvas>
<Controls/>
<View>
<Camera/>
</View>
</Canvas>

I want ortho and map to work together and cameracontrols with perspective camera

resources i found:
for camera controls:

https://codesandbox.io/embed/r3f-camera-controllers-reset-camera-forked-xd6ub?file=/src/index.js&codemirror=1

Changing camera:
#709
https://codesandbox.io/s/r3f-camera-transition-with-effects-green-flash-zonbb