React-native camera grid and level functionalities

Question

I am developing grid and level functionalities for react-native camera application. I have already integrate some code for grid and level. I am using react-native-sensor for detect the rotation and level. but level function not working properly. Can you help me to fix this.

// GridLevelerComponent.js
import React, { useState, useEffect } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { gyroscope} from 'react-native-sensors';

const GridLevelerComponent = () => {
  const [rotation, setRotation] = useState(0);

  useEffect(() => {

    const subscription =  gyroscope.subscribe(({ x, y, z }) => {
      const newRotation = rotation + z * 0.05; // Adjust multiplier
      setRotation(newRotation);
    });

    return () => subscription.unsubscribe();
  }, [rotation]);

  const gridRotation = {
    transform: [
      { rotateZ: `${rotation}rad` },
    ]
  };


  return (
    <View style={styles.container}>


      <View style={[styles.grid, gridRotation]}/>


      <View style={[styles.gridRow, styles.gridHorizontal]} />
      <View style={[styles.gridRow, styles.gridHorizontal2]} />
      <View style={[styles.gridRow, styles.gridHorizontal]} />

      <View style={[styles.gridColumn, styles.gridVertical]} />
      <View style={[styles.gridColumn, styles.gridVertical2]} />
      <View style={[styles.gridColumn, styles.gridVertical]} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },

  grid: {
    position: 'absolute',
    width: '33%',
    height: '33%',
    borderWidth: 1,
    borderColor: 'white',
    backgroundColor:'blue'
  },
  gridRow: {
    position: 'absolute',
    height: 1,
    width: '100%',
  },
  gridColumn: {
    position: 'absolute',
    width: 1,
    height: '100%',
  },
  gridHorizontal: {
    top: '33.333%',
    backgroundColor: 'white',
  },
  gridHorizontal2: {
    top: '66.666%',
    backgroundColor: 'white',
  },
  gridVertical: {
    left: '33.333%',
    backgroundColor: 'white',
  },

  gridVertical2: {
    left: '66.666%',
    backgroundColor: 'white',
  },

});

export default GridLevelerComponent;

Above code is grid and level. It should rotate properly based on device rotation. I need the feature like this https://www.youtube.com/shorts/C05dX3g-_2o