Carbon: HeaderMenuItem element bug with typescript

[ilievZlatko]

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:

[emyarod]

can you create a reduced test case in Code Sandbox (with TS) for easier testing and debugging?

[asudoh]

Closing due to inactivity. Also - Seems that <HeaderMenuItem> doesn't take element prop.

[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:

[hugo-dlb]

To anyone who finds this.

Thanks for the help.
It's too bad new users of carbon like me are stuck on this problem when following the official tutorial because of Typescript.
https://www.carbondesignsystem.com/developing/react-tutorial/step-1/#add-routing