I have a component that returns a styled component to which it passes a variant prop. I also want to spread the rest of the props using {...rest} , however as soon as I do that, I get a typescript error because my styled component is not expecting any other props. How am I supposed to indicate that the styled component can expect spread props?

type HeaderVariant = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';

type Props = {
    variant?: HeaderVariant;
    style?: StyleProp<ViewStyle>;
} & TextProps;
interface StyledBaseButtonProps {
    variant: HeaderVariant;
}

const HeaderText: FunctionComponent<Props> = ({ variant = 'h1', children, ...rest }) => {
    return (
        <StyledText variant={variant} {...rest}>
            {children}
        </StyledText>
    );
};

const StyledText = styled.Text<StyledBaseButtonProps>`
    font-family: ${(props) => styles[props.variant].fontFamily};
    color: ${(props) => styles[props.variant].color};
    font-weight: ${(props) => styles[props.variant].fontWeight};
    font-size: ${(props) => styles[props.variant].fontSize};
    line-height: ${(props) => styles[props.variant].lineHeight};
`;