Property "size" overlap with material-ui - Typescript

[randal923]

import Button, { ButtonProps } from '@mui/material/Button'
import { styled } from '@stitches/react'

type ModifiedButtonProps = ButtonProps & {
  size?: 'small' | 'medium' | 'large'
}

export const ButtonComponent = (props: ModifiedButtonProps) => {
  const { children, ...rest } = props

  return <StyledButton {...rest}>{children}</StyledButton>
}

const StyledButton = styled(Button, {
  background: '$button',
  fontSize: '1.4rem',
  color: 'white',
  fontWeight: 600,
  '&:hover': {
    background: '$buttonHover',
  },
  variants: {
    size: {
      large: {
        width: '20rem',
        height: '5rem',
        fontSize: '2rem',
      },
    },
  },
})

const StyledButton: StyledComponent<ExtendButtonBase<ButtonTypeMap<{}, "button">>, {
    size?: "large" | undefined;
}, {}, CSS<{}, {}, {}, {}>>
No overload matches this call.
  Overload 1 of 3, '(props: Omit<{ children?: ReactNode; classes?: Partial<ButtonClasses> | undefined; color?: "inherit" | "primary" | "secondary" | "success" | "error" | "info" | "warning" | undefined; ... 9 more ...; variant?: "text" | ... 2 more ... | undefined; } & Omit<...> & CommonProps & Omit<...>, "size" | ... 1 more ... | "as"> & TransformProps<...> & { ...; }): ReactElement<...> | null', gave the following error.
    Type '{ children: ReactNode; classes?: (Partial<ButtonClasses> & Partial<ClassNameMap<never>>) | undefined; color?: "inherit" | ... 6 more ... | undefined; ... 283 more ...; value?: string | ... 2 more ... | undefined; }' is not assignable to type 'TransformProps<{ size?: "large" | undefined; }, {}>'.
      Types of property 'size' are incompatible.
        Type '"small" | "medium" | "large" | undefined' is not assignable to type '"large" | ({ "@initial"?: "large" | undefined; } & { [x: string]: "large" | undefined; }) | undefined'.
          Type '"small"' is not assignable to type '"large" | ({ "@initial"?: "large" | undefined; } & { [x: string]: "large" | undefined; }) | undefined'.
  Overload 2 of 3, '(props: Omit<{ children?: ReactNode; classes?: Partial<ButtonClasses> | undefined; color?: "inherit" | "primary" | "secondary" | "success" | "error" | "info" | "warning" | undefined; ... 9 more ...; variant?: "text" | ... 2 more ... | undefined; } & Omit<...> & CommonProps & Omit<...>, "size" | ... 1 more ... | "as"> & TransformProps<...> & { ...; }): ReactElement<...> | null', gave the following error.
    Type '{ children: ReactNode; classes?: (Partial<ButtonClasses> & Partial<ClassNameMap<never>>) | undefined; color?: "inherit" | ... 6 more ... | undefined; ... 283 more ...; value?: string | ... 2 more ... | undefined; }' is not assignable to type 'TransformProps<Omit<{}, "size"> & { size?: "large" | undefined; }, {}>'.
      Types of property 'size' are incompatible.
        Type '"small" | "medium" | "large" | undefined' is not assignable to type '"large" | ({ "@initial"?: "large" | undefined; } & { [x: string]: "large" | undefined; }) | undefined'.
          Type '"small"' is not assignable to type '"large" | ({ "@initial"?: "large" | undefined; } & { [x: string]: "large" | undefined; }) | undefined'.
  Overload 3 of 3, '(props: Omit<{ children?: ReactNode; classes?: Partial<ButtonClasses> | undefined; color?: "inherit" | "primary" | "secondary" | "success" | "error" | "info" | "warning" | undefined; ... 9 more ...; variant?: "text" | ... 2 more ... | undefined; } & Omit<...> & CommonProps & Omit<...>, "size" | "css"> & TransformProps<...> & { ...; }): ReactElement<...> | null', gave the following error.
    Type '{ children: ReactNode; classes?: (Partial<ButtonClasses> & Partial<ClassNameMap<never>>) | undefined; color?: "inherit" | ... 6 more ... | undefined; ... 283 more ...; value?: string | ... 2 more ... | undefined; }' is not assignable to type 'TransformProps<{ size?: "large" | undefined; }, {}>'.
      Types of property 'size' are incompatible.
        Type '"small" | "medium" | "large" | undefined' is not assignable to type '"large" | ({ "@initial"?: "large" | undefined; } & { [x: string]: "large" | undefined; }) | undefined'.ts(2769)

I am having an issue where the "sizes" between stitches and material UI are conflicting, even when I try to overwrite them.