reanimated scroll handler does not work on last page

Environment

First of all thanks for maintaining this awesome library!

Here is my package.json, I'm using expo sdk 50

"dependencies": {
    "@babel/runtime": "^7.18.9",
    "@expo/config-plugins": "~7.8.0",
    "@react-native-community/blur": "^4.4.0",
    "@react-navigation/native": "^6.1.6",
    "@sentry/react-native": "5.16.0",
    "@shopify/react-native-skia": "^0.1.234",
    "@tanstack/react-query": "^5.14.2",
    "app": "0.0.0",
    "axios": "^1.6.2",
    "babel-plugin-module-resolver": "^4.1.0",
    "burnt": "^0.12.0",
    "expo": "^50.0.0",
    "expo-application": "~5.8.3",
    "expo-constants": "~15.4.5",
    "expo-dev-client": "~3.3.6",
    "expo-device": "~5.9.3",
    "expo-font": "~11.10.2",
    "expo-linear-gradient": "~12.7.0",
    "expo-linking": "~6.2.2",
    "expo-router": "~3.4.3",
    "expo-splash-screen": "~0.26.3",
    "expo-status-bar": "~1.11.1",
    "expo-updates": "~0.24.8",
    "moti": "^0.27.2",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-error-boundary": "^4.0.12",
    "react-native": "0.73.2",
    "react-native-collapsible": "^1.6.1",
    "react-native-gesture-handler": "~2.14.0",
    "react-native-mmkv": "^2.11.0",
    "react-native-pager-view": "6.2.3",
    "react-native-reanimated": "~3.6.0",
    "react-native-safe-area-context": "4.8.2",
    "react-native-screens": "~3.29.0",
    "react-native-svg": "14.1.0",
    "react-native-tab-view": "^3.5.2",
    "react-native-unistyles": "2.0.0",
    "sentry-expo": "~7.0.0"
  },

Description

When using a reanimated scroll handler in the last page it does not work. It does work if I just pass a onScroll function to the tabs, it's specifically the usage of useAnimatedScrollHandler that breaks. It works on all pages except for the last one but if there is a single page it still works. Not sure if it's a reanimated or a pager view related issue though

Reproducible Demo

const MyPager = () => {
  const scrollOffset = useSharedValue(0);

  const headerANimatedStyle = useAnimatedStyle(() => {
    return {
      opacity: interpolate(scrollOffset.value, [0, 100], [1, 0]),
    };
  });

  const scrollHandler = useAnimatedScrollHandler({
    onScroll: (event) => {
      scrollOffset.value = event.contentOffset.y;
    },
  });

  return (
    <>
      <Animated.View
        style={[
          {
            position: 'absolute',
            top: 0,
            right: 0,
            left: 0,
            height: 50,
            backgroundColor: 'red',
          },
          headerANimatedStyle,
        ]}
      />
      <PagerView style={styles.pagerView} initialPage={0}>
        <Animated.ScrollView style={styles.firstPage} key="1" onScroll={scrollHandler}>
          <Text>First page</Text>
          <Text>First page</Text>
          <Text>First page</Text>
          <Text>First page</Text>
          <Text>First page</Text>
          <Text>First page</Text>
          <Text>First page</Text>
          <Text>First page</Text>
          <Text>First page</Text>
          <Text>First page</Text>
          <Text>First page</Text>
          <Text>First page</Text>
          <Text>First page</Text>
          <Text>First page</Text>
          <Text>First page</Text>
          <Text>First page</Text>
        </Animated.ScrollView>
        <Animated.ScrollView key="2" onScroll={scrollHandler}>
          <Text>Second page</Text>
          <Text>Second page</Text>
          <Text>Second page</Text>
          <Text>Second page</Text>
          <Text>Second page</Text>
          <Text>Second page</Text>
          <Text>Second page</Text>
          <Text>Second page</Text>
          <Text>Second page</Text>
          <Text>Second page</Text>
          <Text>Second page</Text>
          <Text>Second page</Text>
          <Text>Second page</Text>
        </Animated.ScrollView>
      </PagerView>
    </>
  );
};

const styles = StyleSheet.create({
  firstPage: {
    gap: 100,
  },
  pagerView: {
    flex: 1,
  },
});

I could do a reproduction repo if that helps

callstack / react-native-pager-view