I am using reanimated on a project and I am receiving an error

Argument of type '() => { transform: ({ rotateX: `${number}deg`; rotateY?: undefined; } | { rotateY: `${number}deg`; rotateX?: undefined; })[]; }' is not assignable to parameter of type '() => DefaultStyle'.

React Native version : 0.78.0 Reanimated Version : 3.17.1

export const FlipCard = ({
  isFlipped,
  cardStyle,
  direction = "y",
  duration = 500,
  RegularContent,
  FlippedContent,
}: FlipCardProps) => {
  const isDirectionX = direction === "x"

  const regularCardAnimatedStyle = useAnimatedStyle(() => {
    const spinValue = interpolate(Number(isFlipped.value), [0, 1], [0, 180])
    const rotateValue = withTiming(`${spinValue}deg`, { duration })

    return {
      transform: [isDirectionX ? { rotateX: rotateValue } : { rotateY: rotateValue }],
    }
  })

  const flippedCardAnimatedStyle = useAnimatedStyle(() => {
    const spinValue = interpolate(Number(isFlipped.value), [0, 1], [180, 360])
    const rotateValue = withTiming(`${spinValue}deg`, { duration })

    return {
      transform: [isDirectionX ? { rotateX: rotateValue } : { rotateY: rotateValue }],
    }
  })

My code is from the reanimated documentation and when replacing their code with mine in a snack everything works as expected. Any thoughts as to what is going on?

Documentation used : /