my three.js canvas is not responsive on ios

when I go to landscape mode on iPhone 12 the canvas is not responsive. it becomes small an squarish, and when I go back to portrait mode it stays in this new size (small square)

    var scene = new THREE.Scene();

    var camera = new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.01,1000);
    var clock = new THREE.Clock();
    

    var renderer = new THREE.WebGLRenderer( { antialias: true } );
                renderer.setPixelRatio( window.devicePixelRatio );
                renderer.setSize( window.innerWidth, window.innerHeight );
                document.body.appendChild( renderer.domElement );

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


    var rmapped = 0;

    const controls = new OrbitControls( camera, renderer.domElement );  
    var loader = new GLTFLoader();



    scene.background = new THREE.Color(0x000000)



    const cube = new THREE.BoxGeometry( 1,1,1 );

                var light1 = new THREE.PointLight( 0xff0040, 2, 50 );
                light1.add( new THREE.Mesh( cube, new THREE.MeshBasicMaterial( { color: 0xff0040 } ) ) );
                scene.add( light1 );

                var light2 = new THREE.PointLight( 0x0040ff, 2, 50 );
                light2.add( new THREE.Mesh( cube, new THREE.MeshBasicMaterial( { color: 0x0040ff } ) ) );
                light2.position.x=3;
                var light2Obj = new THREE.Object3D();
                light2Obj.add(light2);
                scene.add(light2Obj);

        
                
    camera.position.set(0, 5, 10);




    function animate(){
            requestAnimationFrame(animate);
        light1.rotateY(0.005);
        light2Obj.rotateY(0.009);


  
            renderer.render( scene, camera );
  
              function render() {



renderer.render( scene, camera );

}
        
    }
    animate()

Any idea of what the problem is ? seems to work on Android. read somewhere that resizeobserver api could be a solution but i cannot figure it out

this is what it looks like lanscape mode:

https://i.stack.imgur.com/LXnnz.jpg

back to portrait mode

https://i.stack.imgur.com/QjkBR.jpg