Transform with key of translateX must be a number: {} – React Native, no other posts have helped

I am following a tutorial on YouTube, and have the error Transform with key of "translateX" must be a number:{}. This is the code I have:

import { useContext, useState } from "react";
import { View } from "react-native";
import Animated, { withDecay } from "react-native-reanimated";
import { Card } from "./Card";
import { cards } from "./cardsTemplate";
import { usePanGestureHandler } from "react-native-redash";
import { PanGestureHandler } from "react-native-gesture-handler";

export const Wallet = () => {
  return (
    <View>
      { cards.map((c, i) => {
        const { gestureHandler, translation, velocity, state } =
          usePanGestureHandler();

        const translateX = withDecay({
          value: translation.x,
          velocity: velocity.x,
          state,
        });

        const translateY = withDecay({
          value: translation.y,
          velocity: velocity.y,
          state,
        });

        return (
          <PanGestureHandler key={i} {...gestureHandler}>
            <Animated.View
              key={c.name}
              style={{
                marginVertical: 10,
                transform: [{ translateX }, { translateY }],
              }}
            >
              <Card name={c.name}/>
            </Animated.View>
          </PanGestureHandler>
        );
      })}
    </View>
  );
};

I’ve seen posts with people who didn’t have the <Animation.View> inside the <PanGestureHandler>, but that is not the case with me. I’ve also tried changing the Animated import from react-native to react-native-reanimated and vice versa, but that doesn’t get rid of the error either. My code seems to match the tutorial completely, so it could be a version issue, because the tutorial is from a couple years ago, but I haven’t seen anything online to support this theory.