I'm trying to animate a Pressable component which is why I'm trying to make it animatable like this:

const AnimatedPressable = Animated.createAnimatedComponent(Pressable);

And then use it instead of this:

    <Pressable
        style={({ pressed }) => [
            styles.button,
            styles[variant],
            { width, elevation: pressed && variant !== 'tertiary' ? 5 : 0 },
            { ...(variant === 'tertiary' && pressed ? { backgroundColor: colors.primary50 } : {}) },
            style,
        ]}
        {...rest}
    >
        <HeaderText variant="h4" style={[styles.text, { color: textColor }]}>
            {title}
        </HeaderText>
    </Pressable>

The problem is that as soon as I replace Pressable with AnimatedPressable, my styles break. After fiddling a bit, I realised that they break because of this:

    style={({ pressed }) => [
        styles.button,
        styles[variant],
        { width, elevation: pressed && variant !== 'tertiary' ? 5 : 0 },
        { ...(variant === 'tertiary' && pressed ? { backgroundColor: colors.primary50 } : {}) },
        style,
    ]}

If I remove the pressed, it works fine:

    style={[
        styles.button,
        styles[variant],
        style,
    ]}

Why can't I use pressed in that case?