How do you get consistent gyroscope rotations on 2 axis?

Hi!

I'm trying to use the gyroscope for x and y rotation on an object. In my Start function, I set the rotation of the gyroscope and subtract it in the Update function, so the object is at 0 rotation initially. It works initially, but as I keep rotating the device, the rotation gets a little out of sync, so putting the device at it's start position no longer has a zero rotation (or close to it) on my object. Is there a way to get the gyroscope rotations to be more consistent?

Here is the code I'm using:

 var clampX : Vector2 = Vector2(-1,1);
 var clampY : Vector2 = Vector2(-1,1);
 
 private var startRotation : Vector3;
 private var wantedRotation : Vector3;
 
 function resetRotation() {
     startRotation = Input.gyro.attitude.eulerAngles;
 
     # Subtract 360 from rotations so rotation doesn't flip when < 0
     if(startRotation.x > 180) {
         startRotation.x = startRotation.x - 360;
     }
     if(startRotation.y > 180) {
         startRotation.y = startRotation.y - 360;
     }
 }
 
 function Start() {
     Input.gyro.enabled = true;
     resetRotation();
 }
 
 function FixedUpdate() {
     wantedRotation = Input.gyro.attitude.eulerAngles;
     
     # Subtract 360 from rotations so rotation doesn't flip when < 0
     if(wantedRotation.x > 180) {
         wantedRotation.x = wantedRotation.x - 360;
     }
     if(wantedRotation.y > 180) {
         wantedRotation.y = wantedRotation.y - 360;
     }
     
     transform.rotation.eulerAngles.y = Mathf.Clamp( wantedRotation.x - startRotation.x, clampY.x, clampY.y);
     transform.rotation.eulerAngles.x = Mathf.Clamp( wantedRotation.y - startRotation.y, clampX.x, clampX.y);
     transform.rotation.eulerAngles.z = 0;
 
     }
 }