How to make smooth camera transition in react three fiber

Question

Till now I have managed to achieve camera shifting from one place to another but it goes all of a sudden i want a animation or a smooth effect in between current and final camera point

     function Rig({ children }) {
      const outer = useRef(null)
      const inner = useRef(null)
      const [pos, setPos] = useState({
        x: -12,
        y: 20,
        z: 34
      })
      const [type, setType] = useState('initial')
      setTimeout(() => {
        setType('third')
      }, 5000)
    
      useEffect(() => {}, [pos])
    
      useFrame(({ camera, clock }) => {
        if (type === 'initial') {
          outer.current.position.y = THREE.MathUtils.lerp(outer.current.position.y, 0, 0.05)
          inner.current.rotation.y = Math.sin(clock.getElapsedTime() / 8) * Math.PI
          inner.current.position.z = 5 + -Math.sin(clock.getElapsedTime() / 2) * 10
          inner.current.position.y = -5 + Math.sin(clock.getElapsedTime() / 2) * 2
        }
        if (type === 'final') {
          camera.position.set(0, 20, 34)
        }
})
  return (
    <group position={[0, -100, 0]} ref={outer}>
      <group ref={inner}>{children}</group>
    </group>
  )
}

I read in the documentation this could be achieve through react spring or tween camera but i couldn't implement any of those

Answer 1

I use CameraControls npm i camera-controls, but don't know how to change transition speed

Example https://codesandbox.io/s/react-three-fiber-camera-controls-4jjor?file=/src/App.tsx