Type error when casting link-like items

[jfacoustic]

• I have searched the Issues to see if this bug has already been reported
• I have tested the latest version

Steps to reproduce

Create an element like a SidebarItem or NavbarItem and override the base element. For example, Remix/React Router has a custom Link element that enables client-side routing:

<SidebarItem
  as={Link}
  to="/settings"
>
  Settings
</SidebarItem>

Current behavior

While the code itself works, typescript gives an error like the following:

TS2322: Type '{ children: string; as: ForwardRefExoticComponent<LinkProps & RefAttributes<HTMLAnchorElement>>; to: string; icon: ForwardRefExoticComponent<...>; className: string; }' is not assignable to type 'IntrinsicAttributes & SidebarItemProps & RefAttributes<Element>'.
  Property 'to' does not exist on type 'IntrinsicAttributes & SidebarItemProps & RefAttributes<Element>'.

Expected behavior

Typescript should allow passing the base components' props without an error.

Context

Typechecking only.

Note, these components' proptypes previously extended Record<string, unknown>, but that was replaced with ThemeingProps<ComponentTheme>.

For example:

export interface SidebarItemProps extends Omit<ComponentProps<"div">, "ref">, 
Record<string, unknown> {}

but this has now been replaced with:

export interface SidebarItemProps extends Omit<ComponentProps<"div">, "ref">, ThemingProps<SidebarItemTheme> { };

[jfacoustic]

Trying to pass in target="_blank" results in a similar error.

[Rahat47313]

What happens if you do something like this instead:

<SidebarItem>
  <Link to="/settings">
    Settings
  </Link>
</SidebarItem>

[jfacoustic]

@Rahat47313 That works for me, but these components still have the as prop. It makes sense to either remove that prop or go back to passing in the props of the as component. Also, since these components are anchors by default, target should be an available prop (alongside any other anchor props).