Dwinzo_dev/app/src/modules/duplicate/duplicateSetup/controlsDuplicate.tsx

import { CameraControls } from "@react-three/drei";
import { useRef } from "react";
import { useFrame, useThree } from "@react-three/fiber";
import * as CONSTANTS from '../../../types/world/worldConstants';

import { useDuplicatedCamData, useToggleView } from "../../../store/builder/store";

export default function ControlsDuplicate() {
    const controlsRef = useRef<CameraControls>(null);
    const { toggleView } = useToggleView();
    const state = useThree();
    const { duplicatedCamData } = useDuplicatedCamData();

    useFrame(() => {
        controlsRef.current?.setPosition(...duplicatedCamData.camPosition, true);
        controlsRef.current?.setTarget(...duplicatedCamData.camTarget, true);
    })

    return (
        <>
            <CameraControls
                makeDefault
                ref={controlsRef}
                minDistance={toggleView ? CONSTANTS.twoDimension.minDistance : CONSTANTS.threeDimension.minDistance}
                maxDistance={CONSTANTS.thirdPersonControls.maxDistance}
                minZoom={CONSTANTS.thirdPersonControls.minZoom}
                maxZoom={CONSTANTS.thirdPersonControls.maxZoom}
                maxPolarAngle={CONSTANTS.thirdPersonControls.maxPolarAngle}
                camera={state.camera}
                verticalDragToForward={true}
                boundaryEnclosesCamera={true}
                dollyToCursor={toggleView}
            >
            </CameraControls>
        </>
    );
}