Direction on onSwipeableOpen undefined

[kritikakurani26]

Hi everyone.
I'm trying to execute two different graphQL mutations on onSwipeableOpen depending on the direction. According to the example at https://github.com/software-mansion/react-native-gesture-handler/blob/main/example/src/showcase/swipeable/AppleStyleSwipeableRow.tsx#L100 I should simply have the direction passed in as an argument, however, when I log it, I get the direction as undefined.
Here's some code if it helps in detecting what's wrong:

export default function Card({ data, deleteItem }: Props) {
  const [mutation1] = useMutation(MUTATION1);
  const [mutation2] = useMutation(MUTATION2);

  const renderLeftActions = (progress, dragX) => {
    return (
      <RectButton
        style={styles.leftAction}
      >
        <AnimatedIcon
          name="favorite"
          size={30}
          color="#fff"
          style={[styles.actionIcon]}
        />
      </RectButton>
    );
  };

  const renderRightActions = (progress, dragX) => {
    return (
      <RectButton
        style={styles.rightAction}
      >
        <AnimatedIcon
          name="archive"
          size={30}
          color="#fff"
          style={[styles.actionIcon]}
        />
      </RectButton>
    );
  };

  const height = new Animated.Value(100);

  return (
    <View style={styles.container}>
      <Swipeable
        renderLeftActions={renderLeftActions}
        renderRightActions={renderRightActions}
        rightThreshold={-200}
        onSwipeableOpen={(direction) => {
          console.log(direction);
        }}
      >
        <Animated.View style={[styles.card, { height: height }]}>
          <View style={styles.details}>
            <Text style={[{ fontSize: 20 }]}>{data.getName()}</Text>
          </View>
        </Animated.View>
      </Swipeable>
    </View>
  );
}

Can someone please help me in figuring out why the direction is undefined? Thanks in advance.