how to set value on different shared value in useAnimatedGestureHandler?

Question

supporse i have a tab bar, but shared in the same scrollview, i want the scroll postion is seperated, so i created 2 animated shared values. as i change the tab, the currentScroll is changed to the related shared value too.

the problem is, there is only one PanGestureHandler and in the gestureHander, the currentScroll in the callback function of onStart,onActive and onEnd is not changed even i set the DependencyList to [currentScroll] and called setCurrentScroll to change it.

i tried to use React.useCallback to define these 3 callback functions, but get error says ExceptionsManager.js:149 TypeError: Cannot read property 'toString' of undefined

so my question is, how to set value on different shared value in gestureHander?

  const currentScrolls = [useSharedValue(0), useSharedValue(0)];

  const [currentScroll, setCurrentScroll] = React.useState(currentScrolls[0]);

  const gestureHander = useAnimatedGestureHandler(
    {
      onStart: (event, ctx) => {
        ctx.startY = currentScroll.value;
        cancelAnimation(currentScroll);
      },
      onActive: (event, ctx) => {
        currentScroll.value = ctx.startY + event.translationY;
      },
      onEnd: (event, ctx) => {
        currentScroll.value = withDecay({ velocity: event.velocityY });
      }
    },
    [currentScroll]
  );

  const dragStyle = useAnimatedStyle(() => {
    return {
      transform: [{ translateY: currentScroll.value }]
    };
  }, []);
...
 <GestureHandlerRootView style={{width: '100%', flex: 1}}>
      <PanGestureHandler onGestureEvent={gestureHander}>
...