Transform.rotate_x & Transform.rotate_y results in z-axis rotation. | Bevy | Page 1

pub fn control(
    mut query: Query<(&Projection, &mut Transform), With<MainCamera>>,
    mut mouse_motion: EventReader<MouseMotion>,
    settings: Res<MouseSettings>,
) {
    let (projection, mut transform) = query.single_mut();

    for ev in mouse_motion.read() {
        transform.rotate_x(-ev.delta.y * settings.sensitivity);
        transform.rotate_y(-ev.delta.x * settings.sensitivity);
    }
}

Here is my camera controller. I am trying to implement a 3D first-person camera. This code is the only code for the camera. MouseSettings.sensitivity is set to 0.01 and the MainCamera component just marks the main camera.

When I run this code, it almost works right, but whenever I look around, the z-axis rotates as well. For example, if I move my mouse in circles, the camera will tilt and eventually be upside-down.

I also tried doing ev.delta.y.to_radians(), but this did not help.

#Transform.rotate_x & Transform.rotate_y results in z-axis rotation.