react native PanGestureHandler Does not work - react-native

Question

I am newbie in react native and I am trying to use the panGestureHandler , guided by the documentation the code was written as follow:
import { GestureHandlerRootView,PanGestureHandler } from "react-native-gesture-
handler";
import { useEffect } from "react";
import { Animated,Button,Dimensions,StyleSheet,ScrollView ,View,Text} from "react-
native";
import { useAnimatedGestureHandler, useAnimatedStyle, useSharedValue, withSpring,
withTiming } from "react-native-reanimated";
export default function App () {
const progress= useSharedValue(2)
const panHandler=useAnimatedGestureHandler({
onStart:(event,context)=>{},
onActive:(event,context)=>{},
onEnd:(event,context)=>{}
})
const animatedStyle=useAnimatedStyle(()=>{
return{
borderRadius:progress.value*30
}
})
return(
<GestureHandlerRootView >
<PanGestureHandler onGestureEvent={panHandler}>
<Animated.View style={[styles.container,animatedStyle]}><Text>test</Text>
</Animated.View>
</PanGestureHandler>
</GestureHandlerRootView>
)}
but I always get the following error:
ERROR Error: Expected `onGestureHandlerEvent` listener to be a function, instead got a value of `object` type.

Answer 1

import Animated from react-native-reanimated will fix this issue.
import Animated, {
useSharedValue,
withSpring,
useAnimatedStyle,
useAnimatedGestureHandler,
} from 'react-native-reanimated';