Animated Gesture Handler React Native update state

Question

Im trying to create a state where I save my value whenever the Gesture is onActive. I need the value so I can find the index of my snapPoints and then use that index to find my current value.

const usePanGestureHandler = (snapPoints) => {
  const offset = useSharedValue(-ITEM_HEIGHT);
  const position = useSharedValue(offset.value);
  const toValue = useSharedValue(0);
  const [activeIndex, setActiveIndex] = useState(0);

  const gestureHandler = useAnimatedGestureHandler({
    onStart: () => {
      offset.value = position.value;
    },
    onActive: (event) => {
      position.value = offset.value + event.translationY;
      toValue.value = snapPoint(position.value, event.velocityY, snapPoints);
      setActiveIndex(toValue.value);
    },
    onEnd: () => {
      position.value = withTiming(toValue.value, timmingConfig);
    },
  });
  return { position, gestureHandler };
};

const GestureHandler = ({ max, pickerTranslateY }) => {
  const snapPoints = new Array(max).fill(0).map((_, i) => i * -ITEM_HEIGHT);
  const { position, gestureHandler } = usePanGestureHandler(snapPoints);

  useAnimatedReaction(
    () => {
      position.value;
    },
    () => {
      pickerTranslateY.value = position.value + ITEM_HEIGHT * 2;
    },
    []
  );

  return (
    <PanGestureHandler onGestureEvent={gestureHandler}>
      <Animated.View
        style={[
          StyleSheet.absoluteFillObject,
          { backgroundColor: "rgba(255, 255, 255, 0.1)" }, //Background for the panGesture
        ]}
      />
    </PanGestureHandler>
  );
};