No overload matches this call in Next.js/Typescript

Question

I got this type error. No overload matches this call.

Overload 1 of 3, '(props: PolymorphicComponentProps<"web", FastOmit<Omit<AnchorHTMLAttributes, keyof InternalLinkProps> & InternalLinkProps & { ...; } & RefAttributes<...>, never>, void, void, {}, {}>): Element',

Below is my code:

type ButtonProps = {
    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void; // to handle onClick functions
    children?: React.ReactNode; // make the component able to receive children elements
    color?: 'primary' | 'secondary'; // two styling options (you can create as many as you want)
    disabled?: boolean; // make the button disabled or not
    href?: string;
};

const Button = ({href, children}: ButtonProps) =>{
    return(
        <BtnSection>
         <SignInBtn href={href} >{children}</SignInBtn>
           <Icon src={icon} width="24" height="24"/>
        </BtnSection>
    )
}

I tried making my button reuseable by passing href as a prop.

Answer 1

So i was able to fix the problem after so many attempt by removing the question mark in the href propytype Declaration

href?: string;

now i used this,

href: string;