TypeScript error when implementing react-bootstrap Tab

Question

I am having an issue when implementing react-bootstrap Tabs in create-react-app typescript application. Below is my code.

import React from "react";
import { Link } from "react-router-dom";
import Tabs from 'react-bootstrap/Tabs';
import Tab from 'react-bootstrap/Tabs';

export function Sonnet(props: any) {
    return (<div>Test</div>);
}
const AddCampaigns: React.FunctionComponent<any> = (props: any) => {

    return (
        <div className='row'>
            <Tabs defaultActiveKey="profile" id="uncontrolled-tab-example">
                <Tab eventKey="home" title="Home">
                    <Sonnet />
                </Tab>
                <Tab eventKey="profile" title="Profile">
                    <Sonnet />
                </Tab>
                <Tab eventKey="contact" title="Contact" disabled>
                    <Sonnet />
                </Tab>
            </Tabs>
        </div>
    );
}

export default AddCampaigns;

Below is the error message:

TypeScript error in src/components/templates/tab/index.tsx(14,22):
No overload matches this call.
  Overload 1 of 2, '(props: Readonly<ReplaceProps<BsPrefixComponentClass<"div", NavProps>, BsPrefixProps<BsPrefixComponentClass<"div", NavProps>> & TabsProps>>): Tabs<...>', gave the following error.
    Type '{ children: Element; eventKey: string; title: string; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Tabs<BsPrefixComponentClass<"div", NavProps>>> & Readonly<...> & Readonly<...>'.
      Property 'eventKey' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Tabs<BsPrefixComponentClass<"div", NavProps>>> & Readonly<...> & Readonly<...>'.
  Overload 2 of 2, '(props: ReplaceProps<BsPrefixComponentClass<"div", NavProps>, BsPrefixProps<BsPrefixComponentClass<"div", NavProps>> & TabsProps>, context?: any): Tabs<...>', gave the following error.
    Type '{ children: Element; eventKey: string; title: string; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Tabs<BsPrefixComponentClass<"div", NavProps>>> & Readonly<...> & Readonly<...>'.
      Property 'eventKey' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Tabs<BsPrefixComponentClass<"div", NavProps>>> & Readonly<...> & Readonly<...>'.  TS2769

Any ideas to resolve this? Thanks

Edit: update correct code

Answer 1

In the code provided you're importing Tab component from wrong directory: react-bootstrap/Tabs instead of react-bootstrap/Tab:

import Tab from 'react-bootstrap/Tab'; 

You can also import it like this:

import { Tabs, Tab } from "react-bootstrap";