Rotating the z-axis doesn't work

[yamildiego]

I am developing a cube where the idea is that the user can move the cube as they like. Most of the movements I need work perfectly fine, but there are two faces that I can't make work correctly. I'm passing the correct parameter to rotate the z-axis, but it rotates it on the x-axis instead. For practical purposes, I removed all unnecessary code from the app and left only a very basic example of the cube with the four allowed user movements.

Here the example.

The application doesn't crash, but it rotates on the wrong axis.

Up and down work fine.
Left and right work in certain positions.

Steps to reproduce the error:

Right + Down + Left or Right (both fail)
Right + Up + Left or Right (both fail)

Basically, the cube has problems when the red or orange face is on top and an attempt is made to move the cube to the left or right.

It does seem like an error since providing the movement to either the x or z axis produces the same result. However, I'm lost and would appreciate any kind of help.

[CodyJasonBennett]

I'd look into Euler angles generally, but it's notable they suffer from gimbal lock compared to other representations like quaternions which I suspect you're describing here. three.js is in charge of any behavior you see on screen though, so this is nothing with R3F which is purely responsible for reconciliation of props/state.