Error: Reading from _value directly is only possible on the UI runtime

[vaibhavshah0201]

When I'm trying to use useAnimatedStyle in my component I facing this issue when its render.

`const translateX = useSharedValue(0);
const translateY = useSharedValue(0);
type ContextType = {
translateX: number;
translateY: number;
};

const panGestureEvent = useAnimatedGestureHandler<
PanGestureHandlerGestureEvent,
ContextType

({
onStart: (event, context) => {
context.translateX = translateX.value;
context.translateY = translateY.value;
},
onActive: (event, context) => {
translateX.value = event.translationX + context.translateX;
translateY.value = event.translationY + context.translateY;
},
onEnd: () => {
const distance = Math.sqrt(translateX.value ** 2 + translateY.value ** 2);

  if (distance < CIRCLE_RADIUS + SIZE / 2) {
    translateX.value = withSpring(0);
    translateY.value = withSpring(0);
  }
},

});

const rStyle = useAnimatedStyle((): any => {
return {
transform: [
{
translateX: translateX.value,
},
{
translateY: translateY.value,
},
],
};
});
return (

<Animated.View style={[rStyle]}>
<Image
style={[{height: 100, width: 100}]}
source={{uri: props.uploadedImage.path}}
/>
</Animated.View>

)

`

package.json
"react-native-gesture-handler": "^2.12.1",
"react-native-reanimated": "^3.4.1",