Animation issues

Questions
1

What i wanted to do here was, when an object in the scene is clicked, i want the camera to zoom into the front of the object upsers(meanwhile shifting lookAt point too)

This is the camera component code which i have seperated from Canvas

function Camera(props) {
const ref = useRef()
const { setDefaultCamera, camera } = useThree()
const spring_props = useSpring({config: {mass: 1, tension: 100, friction: 100},pos: props.clicked? props.clickedObjPos: [0,0,50] });


// Make the camera known to the system
useEffect(() => void setDefaultCamera(ref.current), [])

// Update it every frame
useFrame(() => ref.current.updateMatrixWorld())
return <a.perspectiveCamera ref={ref} near={0.1} position={spring_props.pos} {...props} />
}

spring_props is the props created by useSpring hook. It works on the position of the camera when one of the objects in the scene is clicked and feeds in the position of the clicked object as the final value.
clicked is a state variable in the main App component which is set to true when an object is clicked and clickedObjPos is the position of the clicked object.

So, I’m having 3 issues/questions here:

  1. Whenever an onClick event is called on a clicked object and the clicked props is changed, the camera position animates, but at the start frame, there is a white flash on
    the scene background(all objects still visible). I have a cubetexture loaded as the scene.background.
  2. I couldnt find a way to animate the lookat, adding a useSpring prop on the controls.target seems to render a blank canvas.
  3. Is there a cleaner/ best practice to carry out the camera animation in r3f?

Help me with this thanks in advance.