Polymorphic component overrides doesn't seem to work with TypeScript

[brionmario]

Describe the issue:

Typings doesn't properly work when component prop is used and trying to add a specific prop related to the overriden component.

Ex:

Stack Trace

Type '{ children: Element[]; component: "h1" | C; style?: CSSProperties; classes?: Partial<CardClasses> & Partial<ClassNameMap<never>>; ... 261 more ...; className: string; }' is not assignable to type 'IntrinsicAttributes & { component?: ElementType; } & Omit<CardProps<"div", {}>, "component">'. Property 'href' does not exist on type 'IntrinsicAttributes & { component?: ElementType; } & Omit<CardProps<"div", {}>, "component">'. Did you mean 'ref'?ts(2322)

How to reproduce:

• Get the Card component
• Override using the a elemet
• add anchor element specific prop like href

Expected behavior:

Typescript should not complain and should provide necessary intellisense.

Additional context :

• Affected Package:
  • @oxygen-ui/logger
  • @oxygen-ui/primitives
  • @oxygen-ui/react
  • @oxygen-ui/react-icons
• Library Version: [e.g., 1.10.0, 2.0.0-alpha]
• OS:
  • Windows
  • Linux
  • Mac
  • Other
• Browser:
  • Google Chrome
  • Firefox
  • Safari
  • Microsoft Edge
  • Brave
  • Opera
  • Other

Optional Fields

Related issues:

• [typescript] Incompatible types between React.forwardRef and OverridableComponent mui/material-ui#32420