I'm trying to add styled components to my project, but I'm having some trouble changing the style based on the props of the styled component. Whenever I try to do this - width: ${(props) => (props.wide ? '100%' : undefined)}; I get a Property 'wide' does not exist on type 'ThemedStyledProps<PressableProps & RefAttributes<View>, DefaultTheme>'. error.

I'm passing variant, wide and style to the styled component and I have the props type defined like this:

type StyledPressableProps = {
    variant?: ButtonVariant;
    wide?: boolean;
} & PressableProps;

But I'm still getting a TS error.

My code:

import React, { FunctionComponent } from 'react';
import { PressableProps, ViewStyle, StyleProp } from 'react-native';
import styled from 'styled-components/native';

import colors from '@src/core/colors';
import HeaderText from '../Text/HeaderText';

type ButtonVariant = 'primary' | 'secondary' | 'tertiary';

type Props = {
    title: string;
    variant?: ButtonVariant;
    wide?: boolean;
    style?: StyleProp<ViewStyle>;
} & Omit<PressableProps, 'style'>;

type StyledPressableProps = {
    variant?: ButtonVariant;
    wide?: boolean;
} & PressableProps;

const PrimaryButton: FunctionComponent<Props> = ({ title, variant = 'primary', wide = false, ...rest }) => {
    const textColor = variant === 'primary' ? colors.white : colors.primary600;

    return (
        <StyledPressable
            variant={variant}
            wide={wide}
            style={({ pressed: isPressed }) => [{ elevation: isPressed ? 5 : 0 }]}
            {...rest}
        >
            <StyledHeaderText variant="h4" style={{ color: textColor }}>
                {title}
            </StyledHeaderText>
        </StyledPressable>
    );
};

const StyledPressable: FunctionComponent<StyledPressableProps> = styled.Pressable`
    padding: 12px 24px;
    border-radius: 100px;
    border-width: 1.5px;
    justify-content: center;
    align-items: center;
    align-self: center;
    width: ${(props) => (props.wide ? '100%' : undefined)};
    background-color: ${(props) => styles[props.variant].backgroundColor};
    border-color: ${(props) => styles[props.variant].borderColor};
`;

const StyledHeaderText = styled(HeaderText)`
    text-align: center;
`;

const styles = {
    primary: {
        backgroundColor: colors.primary600,
        borderColor: colors.primary600,
    },
    secondary: {
        backgroundColor: colors.white,
        borderColor: colors.primary600,
    },
    tertiary: {
        backgroundColor: 'transparent',
        borderColor: 'transparent',
    },
};

export default PrimaryButton;