I'm building moving machine-part with three arrows moving on axes. Every arrow has its own angle. 3 checkbox and 4 buttons. Pressing on the first button moves arrow 20 degree to the right, second 20 degree to the right. Third moves arrow to the left, fourth moves arrow to the right. The problem is: after few rounds pressing on the first or second button stops moving an arrow. Don't know why does it happen.

Here I link check boxes to the arrows

const handleChangeButton=(buttonName)=>{  
  switch (buttonName) {
    case 'turret':
      setSelectedButton('turret')
      console.log(buttonName)
      break;
    case 'lazer':
      setSelectedButton('lazer')
      console.log(buttonName)
      break;
    case 'lezerr':
      setSelectedButton('lezerr')
      console.log(buttonName)
      break;  
  }
}
  const changeButtonToTurret=()=>{
    props.handleChangeButton('turret')
  
  }
  const changeButtonToLazer=()=>{
    props.handleChangeButton('lazer')
  
  }
  const changeButtonTorad=()=>{
    props.handleChangeButton('lezerr')
  
  }

Here I give a new angle and insert the three different angles of each arrow

 const handleChange=(e)=>{
 let curretnAngle=(e.target.valueAsNumber);
   if (props.selectedButton=='turret') {
     curretnAngle=props.angleTurret;
   }
   else if (props.selectedButton=='lazer') {
      curretnAngle=props.angleLazer;
   } 
   else{
     curretnAngle=props.radanglee;
   }

And here I lower and raise the new angle 20 degrees

    switch (e.target.name){
      case 'minus':
          props.handlerotate(curretnAngle-=20)
          break;
      case 'plus':
          props.handlerotate(curretnAngle+=20)
          break;
    }
  }

This is how the angle of each arrow knows to move through the new angle 20 degrees right and left

The picture of the simulation = : https://i.stack.imgur.com/JfHgo.png