Trying to get it to work with Reanimated

[jlmurphysa]

Hi there.

I'm trying to get the underlay opacity to increase in proportion to percentOpen.
Am getting this error and am struggling to figure out why:

Am using it with react-native-draggable-flatlist like this:

  const DeleteUnderlay = () => {
    const { percentOpen } = useSwipeableItemParams<PlayerSet>()
    const animatedStyle = useAnimatedStyle(
      () => ({
        opacity: percentOpen.value,
      }),
      [percentOpen],
    )

    useEffect(() => {
      console.log('swipeableItemParams.percentOpen :>> ', percentOpen.value)
    }, [percentOpen.value])

    return (
      <XStack style={[styles.underlayLeft, animatedStyle]}>
        <TouchableOpacity
          onPress={() => {
            console.log('onPress called')
          }}
        />
      </XStack>
    )
  }

  const renderItem = useCallback(
  ({ item, drag }: RenderItemParams<PlayerSet>) => (
    <SwipeableItem
      activationThreshold={DELETE_ACTIVATION_THRESHOLD}
      item={item}
      key={item.id}
      renderUnderlayLeft={() => <DeleteUnderlay />}
      snapPointsLeft={DELETE_SNAP_POINTS}
      swipeDamping={DELETE_SWIPE_DAMPING}
    >
      {/* <ShadowDecorator> */}
      <SetCardItem
        artists={item.artists}
        artwork={item.artwork}
        assetId={item.id}
        closePopup={() => {}}
        drag={drag}
        duration={item.duration}
        isPopupOpen={false}
        key={item.id}
        listeningDuration={item.listeningDuration}
        openPopup={() => {}}
        ratingCount={item.ratingCount}
        ratingType={item.ratingType}
        setTitle={item.title}
      />
      {/* </ShadowDecorator> */}
    </SwipeableItem>
  ),
  [],
)

Help/insight would be much appreciated 🙏