Canvas distortion on resize (even with requestAnimationFrame)

The title is self-explanatory.
The aspect ratio goes back to normal per refresh, which isn’t great of an option.

The code:

let scene, camera, renderer, cube;

function init(){
 scene = new THREE.Scene();

camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

 renderer = new THREE.WebGLRenderer({ antialias: true});

renderer.setSize(window.innerWidth, window.innerHeight);


document.body.appendChild(renderer.domElement);

const geometry = new THREE.BoxGeometry( 2, 2, 2 );
 
const texture = new THREE.TextureLoader().load('memed-io-output (1).jpeg')
   const material = new THREE.MeshBasicMaterial( {map: texture} );
cube = new THREE.Mesh( geometry, material );
scene.add(cube);


camera.position.z = 5;



}


function animate(){
requestAnimationFrame(animate);
cube.rotation.z += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
}

window.addEventListener('resize', () => {
camera.aspect = window.innerHeight / window.innerWidth;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
})

init();
animate();

It should be:

camera.aspect = window.innerWidth / window.innerHeight;

Live example: https://jsfiddle.net/w189srhz/2/

Oh wow, never thought this would be the problem thanks.