while using 2 animation loops first works as expected but the second snaps in

Question

I am trying to simulate a rubik's cube with three.js and now my goal is to rotate the faces using keyboard keys. The first rotation is doing fine but the second rotation snaps right in and also it is rotating in the direction of the first one (if I start with up clockwise the bottom will rotate against clockwise and vice versa).

this is my code:

    import * as THREE from 'three'
        import { TrackballControls } from 'three/examples/jsm/controls/TrackballControls';
        
        
        const scene = new THREE.Scene();
        const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
        
        const renderer = new THREE.WebGLRenderer({canvas: document.querySelector("canvas.webgl")});
        renderer.setSize( window.innerWidth, window.innerHeight );
        document.body.appendChild( renderer.domElement );
        
        const geometry = new THREE.BoxGeometry(1, 1, 1);
        const materials = [
            new THREE.MeshBasicMaterial({color: 'white'}),
            new THREE.MeshBasicMaterial({color: 'yellow'}),
            new THREE.MeshBasicMaterial({color: 'red'}),
            new THREE.MeshBasicMaterial({color: 'darkorange'}),
            new THREE.MeshBasicMaterial({color: 'blue'}),
            new THREE.MeshBasicMaterial({color: 'green'}),
        ];
        for(let i = 0; i < geometry.groups.length; i++)
            geometry.groups[i].materialIndex = i;
        
        const cube = [];
        
        for(let y = -1; y <= 1; y++){
            for(let x = -1; x <= 1; x++){
                for(let z = -1; z <= 1; z++){
                    const mesh = new THREE.Mesh(geometry, materials);
                    mesh.position.x = x;
                    mesh.position.y = y;
                    mesh.position.z = z;
                    cube.push(mesh);
                    scene.add(mesh);
                }
            }
        }
        
        const controls = new TrackballControls( camera, renderer.domElement );
        controls.noPan = true;
        controls.noZoom = true;
        controls.rotateSpeed = 3;
        
        camera.position.z = 7.5;
        controls.update();
        
        const turnSpeed = 2;
        
        const face = new THREE.Group();
        l
    
    et indexes = [];
    scene.add(face);
    
    function resetFace(){
        let tempQuaternion = new THREE.Quaternion();
    
        for(let i = 0; i < indexes.length; i++){
            cube[i].getWorldQuaternion(tempQuaternion);
            scene.add(cube[i]);
            cube[i].quaternion.copy(tempQuaternion);
        }
    
        indexes = [];
    }
    
    function getU(){
        resetFace();
        for(let i = 18; i < 27; i++){
            face.add(cube[i]);
            indexes.push(i);
        }
    }
    
    function getB(){
        resetFace();
        for(let i = 0; i < 9; i++){
            face.add(cube[i]);
            indexes.push(i);
        }
    }
    
    function B() {
        requestAnimationFrame( B );
        
        controls.update();
    
        // rotate
        if(face.rotation.y < THREE.MathUtils.degToRad(90))
            face.rotation.y += THREE.MathUtils.degToRad(turnSpeed);
    
        renderer.render( scene, camera );
    }
    
    function U() {
        requestAnimationFrame( U );
        
        controls.update();
    
        // rotate
        if(face.rotation.y > THREE.MathUtils.degToRad(-90))
            face.rotation.y -= THREE.MathUtils.degToRad(turnSpeed);
    
        renderer.render( scene, camera );
    }
    
    document.addEventListener("keydown", (event) => {
        console.log("animation start");
        if(event.code == "KeyA"){
            getU();
            U();
        } 
        else if(event.code == "KeyB"){ 
            getB();
            B();
        }

})

function animate(){
    requestAnimationFrame( animate );

    controls.update();

    renderer.render( scene, camera );
}
animate();

And the result is this: