[Bug]: SideNavMenuItem doesn't have an as prop although warning indicates it does

[adamalston]

Package

@carbon/react

Browser

No response

Package version

1.67.1

React version

No response

Description

SideNavMenuItem doesn't have an as prop, or at least it isn't typed. I want to use a react-router-dom Link as the element in the component.

Reproduction/example

N/A

Steps to reproduce

This code worked in Carbon v10:

<SideNavMenuItem
  key={name}
  element={externalPath ? 'a' : Link}
  href={externalPath}
  target={externalPath ? '_blank' : undefined}
  to={path}
  aria-current={sideMenuItemState[`${menuKey}${name}`]}
>
  {display ?? t(`nls.${section}.${name}`)}
</SideNavMenuItem>

In Carbon v11, I get this warning:

Warning: The `element` prop for `Link` has been deprecated. Please use `as` instead. This will be removed in the next major release. Error Component Stack

This change addresses the warning:

<SideNavMenuItem
  key={name}
  as={externalPath ? 'a' : Link}
  href={externalPath}
  target={externalPath ? '_blank' : undefined}
  to={path}
  aria-current={sideMenuItemState[`${menuKey}${name}`]}
>
  {display ?? t(`nls.${section}.${name}`)}
</SideNavMenuItem>

However, that change results in a TypeScript error that says:

Type '{ children: string; key: string; as: string | (<S = unknown>(props: LinkProps<S> & RefAttributes<HTMLAnchorElement>) => ReactElement<any, string | JSXElementConstructor<...>> | null); href: string | undefined; target: string | undefined; to: string; "aria-current": "page" | undefined; }' is not assignable to type 'IntrinsicAttributes & SideNavMenuItemProps & RefAttributes<HTMLElement>'.
  Property 'as' does not exist on type 'IntrinsicAttributes & SideNavMenuItemProps & RefAttributes<HTMLElement>'.

Suggested Severity

Severity 3 = User can complete task, and/or has a workaround within the user experience of a given component.

Application/PAL

DataPower

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems