Custom Button using styled components typescript

Im trying to create a custom button component which accepts icon as a prop 'icon', we are using style-components and styled system for utility styling. While rendering the component, im getting a typescript overload error. Please refer the component code:

import React, { FC, ReactNode } from "react";
import styled from "styled-components";
import {
layout,
space,
variant,
fontSize,
border,
shadow,
LayoutProps,
SpaceProps,
FontSizeProps,
BorderProps,
ShadowProps,
flexbox,
FlexboxProps,
position,
PositionProps,
} from "styled-system";
export interface IconButtonProps
extends LayoutProps,
SpaceProps,
FontSizeProps,
BorderProps,
ShadowProps,
FlexboxProps,
PositionProps,
Omit<React.HTMLProps<HTMLElement>, "color" | "height" | "size" | "width" | "as"> {
children: any;
variant: "primary" | "secondary";
icon: ReactNode;
}
const IconButtonContainer = styled.button<IconButtonProps>`
border-radius: ${({ theme }) => theme.space["spacing-200"]};
display: inline-flex;
justify-content: center;
align-items: center;
cursor: pointer;
font-size: ${({ theme }) => theme.fontSizes["font-24"]};
padding: "8px";
${variant({
variants: {
primary: {
color: "neutral.0",
backgroundColor: "blue.400",
border: "1px solid",
borderColor: "blue.400",
"&:hover": {
border: "1px solid",
borderColor: "blue.300",
backgroundColor: "blue.300",
},
"&:not(:disabled):not(.disabled):active": {
border: "1px solid",
borderColor: "blue.500",
backgroundColor: "blue.500",
},
"&:disabled": {
opacity: ".6",
color: "neutral.60",
border: "1px solid",
borderColor: "neutral.50",
backgroundColor: "neutral.20",
cursor: "default",
},
},
secondary: {
backgroundColor: "transparent",
border: "0",
"&:hover": {
border: "1px solid",
backgroundColor: "blue.50",
},
"&:not(:disabled):not(.disabled):active": {
border: "1px solid",
backgroundColor: "blue.50",
},
"&:disabled": {
border: "0",
opacity: ".6",
cursor: "default",
},
},
},
})}
${variant({
prop: "size",
variants: {
medium: {
fontWeight: "semibold",
height: "24px",
},
},
})}
${space} ${fontSize} ${border} ${layout} ${shadow} ${flexbox} ${position};
`;
export const IconButton = (props: IconButtonProps) => {
return <IconButtonContainer {...props}>{props.icon}</IconButtonContainer>;
};

And the error is :
>No overload matches this call.
Overload 1 of 2, '(props: { cite?: string | undefined; data?: string | undefined; form?: string | undefined; label?: string | undefined; p?: ResponsiveValue<string | number | symbol, Required<Theme<TLengthStyledSystem>>> | undefined; ... 445 more ...; left?: ResponsiveValue<...> | undefined; } & { ...; } & { ...; }): ReactElement<...>', gave the following error.
Type '{ children: ReactNode; variant: "primary" | "secondary"; icon: ReactNode; width?: ResponsiveValue<Width<TLengthStyledSystem>, Required<Theme<TLengthStyledSystem>>> | undefined; ... 445 more ...; wrap?: string | undefined; }' is not assignable to type '{ cite?: string | undefined; data?: string | undefined; form?: string | undefined; label?: string | undefined; p?: ResponsiveValue<string | number | symbol, Required<Theme<TLengthStyledSystem>>> | undefined; ... 445 more ...; left?: ResponsiveValue<...> | undefined; }'.
Types of property 'ref' are incompatible.
Type 'LegacyRef<HTMLElement> | undefined' is not assignable to type '((((instance: HTMLButtonElement | null) => void) | RefObject<HTMLButtonElement>) & (string | ((instance: HTMLElement | null) => void) | RefObject<...>)) | null | undefined'.
Type 'string' is not assignable to type '((((instance: HTMLButtonElement | null) => void) | RefObject<HTMLButtonElement>) & (string | ((instance: HTMLElement | null) => void) | RefObject<...>)) | null | undefined'.
Overload 2 of 2, '(props: StyledComponentPropsWithAs<"button", any, IconButtonProps, never, "button", "button">): ReactElement<StyledComponentPropsWithAs<"button", any, IconButtonProps, never, "button", "button">, string | JSXElementConstructor<...>>', gave the following error.
Type '{ children: ReactNode; variant: "primary" | "secondary"; icon: ReactNode; width?: ResponsiveValue<Width<TLengthStyledSystem>, Required<Theme<TLengthStyledSystem>>> | undefined; ... 445 more ...; wrap?: string | undefined; }' is not assignable to type '{ cite?: string | undefined; data?: string | undefined; form?: string | undefined; label?: string | undefined; p?: ResponsiveValue<string | number | symbol, Required<Theme<TLengthStyledSystem>>> | undefined; ... 445 more ...; left?: ResponsiveValue<...> | undefined; }'.
Types of property 'ref' are incompatible.
Type 'LegacyRef<HTMLElement> | undefined' is not assignable to type '((((instance: HTMLButtonElement | null) => void) | RefObject<HTMLButtonElement>) & (string | ((instance: HTMLElement | null) => void) | RefObject<...>)) | null | undefined'.ts(2769)
const IconButtonContainer: StyledComponent<"button", any, IconButtonProps, never>

Can someone please help, im a new to typescript and its throwing me more errors.

Try change this line:

Omit<React.HTMLProps<HTMLElement>, "color" | "height" | "size" | "width" | "as">

Omit<React.HTMLProps<HTMLButtonElement>, "color" | "height" | "size" | "width" | "as">

If this doesn't work you might have a problem, maybe you ll need to specify type of IconButton, because it takes by default type any

export const IconButton: FC<IconButtonProps> = ({ icon, ...props }) => {

If you still got a problem maybe it's better to create a new type for the native button props.

Hope my answer will help you.