Hi I was trying to rotate a box using animated.view and Gesture.Rotation

Question

in my code .onUpdate and .onEnd methods are firing but the box is not rotating

below is the code

import {View, Text, Animated, StyleSheet,Image} from 'react-native';
import React, { useState } from 'react';
import {useSharedValue} from 'react-native-reanimated';
import {Gesture, GestureHandlerRootView} from 'react-native-gesture-handler';
import {useAnimatedStyle} from 'react-native-reanimated';
import {GestureDetector} from 'react-native-gesture-handler';
import gestureHandlerRootHOC from 'react-native-gesture-handler';

 const gestureRotation = () => {
       const rotation = useSharedValue(1);  
       const savedRotation = useSharedValue(1);

      const rotationGesture = Gesture.Rotation()
          .onUpdate(e => {
             rotation.value = savedRotation.value + e.rotation;
             console.log('in on update');
    })
    .onEnd(() => {
     savedRotation.value = rotation.value;
     console.log('rotation value ',savedRotation.value);
});

 const animatedStyle = useAnimatedStyle(() => ({transform: [{rotateZ: ${(rotation.value / Math.PI) * 180}deg}]}));

  return (
          <GestureHandlerRootView style={{flex: 1}}>
          <GestureDetector gesture={rotationGesture}>
          <Animated.View style={[styles.box, {transform: [{rotateZ: 
          ${(rotation.value / Math.PI) * 180}deg}]}]} >
          </Animated.View>
          </GestureDetector>
          </GestureHandlerRootView>
         );
   };

export default gestureRotation;

const styles = StyleSheet.create({
   box: {
   height: 200,
   width: 200,
   backgroundColor: 'red',
   color: '#fff',
   justifyContent: 'center',
   alignContent: 'center',
  },
});

dont know why that box is not rotating

Instead of rotateZ I gave rotateX/rotateY/rotate but still not working