I have a group of objects i want to rotate , there is a button which should onclick change from left to right and a stop button which should stop the current group position at its current location , however every time i click rotate , it changes direction but increases in speed even though it is bound to a slider, ive tried calling the animation frame last and cancelling it on each call but nothing works

            var speedslider = document.getElementById("speedinput");
            var direction = true;
            var stopped = true;
            
            speedslider.addEventListener("change",DirectionBTN.onclick);
            zoomOutButton.addEventListener("change", zoomOutFunction);
            speedslider.addEventListener("change",StopStartBTN.onclick);
            
            //rotation of group
            const rotateGroup = function() 
            {
                if(stopped == true){
                    group.rotation.y =!group.rotation.y
                }
                if(direction == true){
                    group.rotation.y += speedslider.value/1000;
                    requestAnimationFrame(rotateGroup)
                    
                }
                if(direction == false){
                    group.rotation.y -= speedslider.value/1000;
                    requestAnimationFrame(rotateGroup)
                }
            };
        //start rotation left
            StopStartBTN.onclick = function() {
                stopped = !stopped
                rotateGroup()
            };
            DirectionBTN.onclick = function() {
                direction = !direction;
                rotateGroup();
            };