ReanimatedError in BottomSheetScrollView – Attempted to extract from a HostObject

Question

I'm encountering a ReanimatedError when trying to use useAnimatedScrollHandler with BottomSheetScrollView from @gorhom/bottom-sheet. The error message is:

ReanimatedError: Exception in HostFunction: [Reanimated] Attempted to extract from a HostObject that wasn't converted to a Shareable., js engine: reanimated

The same error occurs when using React Native’s Animated API instead of Reanimated.

my component where i try to do animation

import React, { memo } from "react";
import { Text, VStack } from "@gluestack-ui/themed";
import { BottomSheetScrollView } from "@gorhom/bottom-sheet";
import { useSharedValue, useAnimatedScrollHandler } from "react-native-reanimated";

interface IWheelPickerProps {
  data: { value: string; label: string }[];
  contentClassname?: string;
}

export const WheelPicker = memo(({ data, contentClassname }: IWheelPickerProps) => {
  const scrollY = useSharedValue(0);

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

  return (
    <VStack className={`flex-1 items-center ${contentClassname}`}>
      <BottomSheetScrollView onScroll={onScroll}>
        {data.map((item) => (
          <VStack className="flex-1 items-start justify-center" key={item.value}>
            <Text bold className="self-center text-xl">{item.label}</Text>
          </VStack>
        ))}
      </BottomSheetScrollView>
    </VStack>
  );
});

Tried using useAnimatedScrollHandler with BottomSheetScrollView, but it throws the ReanimatedError.

Expected useAnimatedScrollHandler to work correctly with BottomSheetScrollView and update scrollY without throwing an error. Expected onScroll to trigger without causing a crash.