PanGestureHandler with functional component react native

I am trying to use a Gesture handler with a functional component. The problem is when I drag for the second time it's dragging from initial position again

This is my code below

let translateXRef = useRef(new Animated.Value(0)).current;

const onGestureEvent = useCallback(
    Animated.event(
      [
        {
          nativeEvent: {
            translationX: translateXRef,
          },
        },
      ],
      { useNativeDriver: true }
    ),
    []
  );

<View
    style={{
      backgroundColor: '#FFFFFF80',
      position: 'absolute',
      top: 0,
      bottom: 0,
      left: 0,
      right: 0,
      height: 100,
    }}
  >
    <PanGestureHandler
      onGestureEvent={onGestureEvent}
      onHandlerStateChange={onHandlerStateChange}
    >
      <Animated.View
        // eslint-disable-next-line react-native/no-inline-styles
        style={{
          height: '100%',
          width: 10,
          backgroundColor: AppColors.buttonColor,
          transform: [{ translateX: translateXRef }],
        }}
      />
    </PanGestureHandler>
  </View>