How to mix React-bootstrap Dropdown components with NavLink component in Typescript?

Question

On the React-bootstrap website they give an example of mixing Dropdown components with the NavLink and NavItem components bellow:

<Dropdown as={NavItem}>
  <Dropdown.Toggle as={NavLink}>Click to see more…</Dropdown.Toggle>
  <Dropdown.Menu>
    <Dropdown.Item>Hello there!</Dropdown.Item>
  </Dropdown.Menu>
</Dropdown>;

But when I add such example in my code:

import * as React from "react";
import { NavDropdown, Dropdown, NavItem, NavLink } from "react-bootstrap";

export default function ReportingAvatar() {
    return (
        <Dropdown as={NavItem}>
            <Dropdown.Toggle as={NavLink}>Click to see more…</Dropdown.Toggle>
            <Dropdown.Menu>
                <Dropdown.Item>Hello there!</Dropdown.Item>
            </Dropdown.Menu>
        </Dropdown>
    );
}

I get errors:

TypeScript error in .../avatar.tsx(7,21):
No overload matches this call.
  Overload 1 of 2, '(props: Readonly<ReplaceProps<BsPrefixComponentClass<"button", ButtonProps>, BsPrefixProps<BsPrefixComponentClass<"button", ButtonProps>> & DropdownToggleProps>>): DropdownToggle<...>', gave the following error.
    Type 'typeof NavLink' is not assignable to type 'BsPrefixComponentClass<"button", ButtonProps>'.
      Construct signature return types 'NavLink<any>' and 'Component<ReplaceProps<"button", BsPrefixProps<"button"> & ButtonProps>, any, any>' are incompatible.
        The types of 'props.onSelect' are incompatible between these types.
          Type 'SelectCallback | undefined' is not assignable to type '((event: SyntheticEvent<HTMLButtonElement, Event>) => void) | undefined'.
            Type 'SelectCallback' is not assignable to type '(event: SyntheticEvent<HTMLButtonElement, Event>) => void'.
  Overload 2 of 2, '(props: ReplaceProps<BsPrefixComponentClass<"button", ButtonProps>, BsPrefixProps<BsPrefixComponentClass<"button", ButtonProps>> & DropdownToggleProps>, context?: any): DropdownToggle<...>', gave the following error.
    Type 'typeof NavLink' is not assignable to type 'BsPrefixComponentClass<"button", ButtonProps>'.  TS2769

     5 |    return (
     6 |        <Dropdown as={NavItem}>
  >  7 |            <Dropdown.Toggle as={NavLink}>Click to see more…</Dropdown.Toggle>
       |                             ^
     8 |            <Dropdown.Menu>
     9 |                <Dropdown.Item>Hello there!</Dropdown.Item>
    10 |            </Dropdown.Menu>

What should I do to get this to work?

Answer 1

It seems that adding the https://www.npmjs.com/package/@types/react-bootstrap package solves this issue.