HeaderMenuItem element bug with typescript

Hello, I am using the latest version of carbon-components-react v7.10.2 with typescript.

I have the following issue, when I pass element prop element={NavLink} and I got the following error:

[tulio-coppola]

To anyone who finds this.

@ilievZlatko’s problem occurs when using Carbon in a TS project.

Your issue is probably related to this: https://github.com/DefinitelyTyped/DefinitelyTyped/issues/44772

You just need to import the LinkProps from react-router-dom (it will probably work with NavLinkProps as well) and use it with the Carbon component. It even works with React Router v6.0.0-alpha.5 (yarn add react-router@next react-router-dom@next as of today)

Example:

import { Link, LinkProps } from 'react-router-dom';

const MainHeader: React.FC = () => (
  <Header aria-label="Carbon Tutorial">
    <SkipToContent />
    <HeaderName<LinkProps> element={Link} to="/" prefix="IBM">
      Carbon Tutorial
    </HeaderName>
    <HeaderNavigation aria-label="Carbon Tutorial">
      <HeaderMenuItem<LinkProps> element={Link} to="repos">
        Repositories
      </HeaderMenuItem>
    </HeaderNavigation>
    <HeaderGlobalBar>
      <HeaderGlobalAction aria-label="Notifications">
        <Notification20 />
      </HeaderGlobalAction>
      <HeaderGlobalAction aria-label="User Avatar">
        <UserAvatar20 />
      </HeaderGlobalAction>
      <HeaderGlobalAction aria-label="App Switcher">
        <AppSwitcher20 />
      </HeaderGlobalAction>
    </HeaderGlobalBar>
  </Header>
);

export default MainHeader;

Image of the code above:

[Daveiano]

This actually works for both <HeaderName> and <SideNavLink>

For <SideNavLink> you to apply it the same:

import { Link, LinkProps } from "react-router-dom";

<SideNavLink<LinkProps> renderIcon={ChartTreemap32}  to="/" element={Link}>
  Overview
</SideNavLink>