Can't figure out how to create a simple custom handle that changes text based on animatedIndex

[andreastorp]

Disclaimer: This might be me not understanding SharedValue.

I am trying to change the text in our custom handle based on if the bottom sheet is "open or closed" (index 0 or index 1).

This is the code

const BottomSheetCustomHandle: React.FC<BottomSheetHandleProps> = ({animatedIndex}) => {
  return (
      <Animated.View style={styles.container}>
        <View style={styles.indicator} />
        <Animated.Text style={styles.bottomSheetText}>
          {animatedIndex.get() == 0 ? "Pull up to see content" : "Pull down to hide content"}
        </Animated.Text>
      </Animated.View>
  );
};

It produces the following warning and it also doesn't rerender the text, when animatedIndex.value changes.

WARN  [Reanimated] Reading from `value` during component render. Please ensure that you do not access the `value` property or use `get` method of a shared value while React is rendering a component.

If you don't want to see this message, you can disable the `strict` mode. Refer to:
https://docs.swmansion.com/react-native-reanimated/docs/debugging/logger-configuration for more details.

I've tried using DerivedValue, useEffect, useAnimatedReaction, useAnimatedProps and other methods in an attempt to make it work. Can some1 please help me resolve this fairly simple issue