Custom perspectiveCamera aspect is incorrect until resize

[yuchant]

When creating this custom camera, the aspect is set to 1/1 on load until I resize stretching the contents of the canvas, and I can't seem to set it otherwise even if I pass it hard coded aspect props.

const AnimatedCamera = (props) => {
  const ref = useRef();
  const set = useThree((state) => state.set);
  // Update it every frame
  useFrame(() => {
    ref.current.updateMatrixWorld();
  });
  // Make the camera known to the system
  useEffect(() => {
    set({ camera: ref.current });
  }, [aspect]);
  return <animated.perspectiveCamera ref={ref} {...props} />;
};

For now, I am not creating a new camera but modifying the existing ones position like so:

const SpringExistingCamera = (props) => {
  useFrame((state) => {
    state.camera.position.set(
      props.cameraSpring.x.get(),
      props.cameraSpring.y.get(),
      props.cameraSpring.z.get()
    );
  });
  return null;
};

Here's a codesandbox with the same problem: https://codesandbox.io/s/vigilant-wood-p976b?file=/src/App.js the box is wide until resize triggered at which point it becomes square.

I've played with giving it an {aspect} value but it doesn't seem to change anything.

Thank you all.

[luroc]

I had kind of a similiar issue and for me it turned out, that it was less a problem of the camera than the renderer.
Getting the renderer from useThree() const { gl } = useThree() and then setting it's size in useEffect() works in your
codesandbox aswell.

useEffect(() => {
    gl.setSize(window.innerWidth, window.innerHeight)
    set({ camera: ref.current });
  }, []);

I'm relly just beginning to use this framework, so it might also be a happy coincidence...