Tab' cannot be used as a JSX component. Its instance type 'Tab' is not a valid JSX element. Types of property 'refs' are incompatible

Question

I'm working on a React typescript project. I'm getting the following error:

'Tab' cannot be used as a JSX component.
  Its instance type 'Tab' is not a valid JSX element.
    Types of property 'refs' are incompatible.
      Type '{ [key: string]: import("C:/Users/Documents/demo-workspace/dttasset/automotive/dtt-automotive-ui/node_modules/@types/enzyme/node_modules/@types/react/index").ReactInstance; }' is not assignable to type '{ [key: string]: React.ReactInstance; }'.
        'string' index signatures are incompatible.**

Here is the code I'm working on:

import React from 'react';
import { Breadcrumb, Tab, Tabs, Modal } from 'react-bootstrap';
import { PDMcgViewMode } from "../../constants/constants";
import { connect } from 'react-redux';
import Loader from 'react-loader-spinner';
import './Dashboard.scss'
import { withParams, history } from "../../HOC";

import ProductCatalogue from "../productCatalogue/ProductCatalogue";
import Header from "../header/header"
import ProductFilter from "../productFilter/ProductFilter";
import ProductLabel from "../productLabel/ProductLabel";
import Recommendations from "../recommendations/Recommendations";
import VehiclePartDetails from "../simulation/VehiclePartDetails";
import Peloton from "../peloton/Peloton";

import configuration from '../../config/client-config.json'
let baseurl = configuration.BaseNavigateURL

type MyProps = {
  userDetails: any,
  sendFilterValue:any,
  isLoadingData:any,
}

type MyState = {
  userRole:any,
  makeValues:any,
  viewModeMDM:any,
  showRecommendationmsg:any,
  showRecommendationtext:any,
  application: any,
}

export class Dashboard extends React.Component<MyProps, MyState>{
  constructor(props: any) {
    super(props);

    var userID = sessionStorage.getItem("app_id_token");
    /* istanbul ignore else */
    if(userID===null){
      history.push(baseurl);
    }

    this.state = {
      userRole: "",
      makeValues: {},
      viewModeMDM: { mode:PDMcgViewMode.CATALOGUEVIEW, data:"", activeTab: "catalogue" },
      showRecommendationmsg: false,
      showRecommendationtext: "",
      application: sessionStorage.getItem("type"),
    }
    this.setMode = this.setMode.bind(this)
    this.setDashboardLink = this.setDashboardLink.bind(this)
    this.setVehicleDetailsLink = this.setVehicleDetailsLink.bind(this)
    this.setMakeValue = this.setMakeValue.bind(this)
  }

  componentDidUpdate(prevProps: any) {
    if (this.props.userDetails !== prevProps.userDetails) {
      this.setState({
        userRole: this.props.userDetails.roleName
      });
    }
  }

  onActionUpdate = (value: any) => {
    this.setState({
      showRecommendationmsg:true,
      showRecommendationtext:value
    })
    /* istanbul ignore next */
    const timer = setTimeout(() => {
      this.setState({
        showRecommendationmsg:false,
        showRecommendationtext:''
      })
    }, 3000);
    /* istanbul ignore next */
    return () => clearTimeout(timer);
  }

  setMode (value: any) {
    this.setState({ viewModeMDM: value })
  }

  setMakeValue (value: any) {
    this.setState({ makeValues: value })
  }

  setKey (value: any){
    var mode = { mode: this.state.viewModeMDM.mode, data: this.state.viewModeMDM.data, activeTab: value}
    this.setState({ viewModeMDM: mode })
  }

  setDashboardLink () {
    this.setState({viewModeMDM: { mode:PDMcgViewMode.CATALOGUEVIEW }})
  }

  setVehicleDetailsLink (){
    this.setState({viewModeMDM: { mode:PDMcgViewMode.VEHICLEDETAILSVIEW, data:this.state.viewModeMDM.data}})
  }

  close(){
    this.setState({ showRecommendationmsg:false })
  }

  showloader(value){
    return(
      <div>
        {value? <div className="dashboardLoader"><Loader type="Oval" color="var( --spinnerColor)" height={80} width={80} /> </div>:null}
      </div>
    )
  }

  showBMBreadcrumbs(){
    var dashboard: any;
    var vehicleDetailView: any;
    var vehicleDetailView2: any;
    var productDetailView: any;


    if (this.state.viewModeMDM.mode === PDMcgViewMode.VEHICLEDETAILSVIEW ||
         this.state.viewModeMDM.mode === PDMcgViewMode.PRODUCTDETAILSVIEW) {
      dashboard = <Breadcrumb.Item onClick={this.setDashboardLink}>Dashboard</Breadcrumb.Item>
    } else {
      dashboard = <Breadcrumb.Item active>Dashboard</Breadcrumb.Item>
    }

    if (this.state.viewModeMDM.mode === PDMcgViewMode.VEHICLEDETAILSVIEW) {
      vehicleDetailView = <Breadcrumb.Item active>Product Details</Breadcrumb.Item>
    } else {
      vehicleDetailView = null
    }

    if (this.state.viewModeMDM.mode === PDMcgViewMode.PRODUCTDETAILSVIEW) {
      vehicleDetailView2 = <Breadcrumb.Item onClick={ this.setVehicleDetailsLink}>Details</Breadcrumb.Item>
      productDetailView = <Breadcrumb.Item active>Product Details</Breadcrumb.Item>
    } else {
      vehicleDetailView2 = null
      productDetailView = null
    }

    return(
      <div>
        <Breadcrumb className="bcdiv medium-16-2">

          {dashboard}

          {vehicleDetailView}

          {vehicleDetailView2}

          {productDetailView}

        </Breadcrumb>
      </div>
    )
  }

  showProductLabel(){
    var productLabel = <ProductLabel viewMode={this.setMode} makeData={this.state.viewModeMDM.data} sendObjectBatch={this.state.makeValues} />;
    var peloton = <Peloton viewMode={this.setMode} sendObjectBatch={this.state.makeValues} ></Peloton>
    if(this.state.application === "auto"){
      return(
        <React.Fragment>
          {productLabel}
        </React.Fragment>
      )
    }
    else{
      return(
        <React.Fragment>
          {peloton}
        </React.Fragment>
      )
    }
  }

  render() {
    return (
      <div>
        {this.showloader(this.props.isLoadingData)}

        <Header sendFilterValue={this.state.makeValues} historyData={this.props}></Header>

        {this.showBMBreadcrumbs()}

        <ProductFilter disabled={(this.state.viewModeMDM.mode === PDMcgViewMode.CATALOGUEVIEW)?false:true}
          sendFilterValue={this.setMakeValue} historyData={this.props}/>

        { (this.state.viewModeMDM.mode === PDMcgViewMode.CATALOGUEVIEW) ?
          <Tabs className="w3-left-margin tabs" activeKey={this.state.viewModeMDM.activeTab} id="uncontrolled-tab-example" onSelect={(k) => this.setKey(k)}>
            /* error is here */
            <React.Fragment>
              <Tab eventKey="catalogue" title="Catalogue">
                <ProductCatalogue viewMode={this.setMode}
                 sendObjectBatch={this.state.makeValues} historyData={this.props}/>
              </Tab>
              <Tab eventKey="recommendations" title="Recommendations">
                <Recommendations makeId={this.state.makeValues.makeId} onAction={this.onActionUpdate} viewMode={this.setMode}
                  sendObjectBatch={this.state.makeValues} historyData={this.props}></Recommendations>
              </Tab>
            </React.Fragment>
          </Tabs>
        : null }

        { (this.state.viewModeMDM.mode === PDMcgViewMode.VEHICLEDETAILSVIEW) ?
            this.showProductLabel()
        : null }

        { (this.state.viewModeMDM.mode === PDMcgViewMode.PRODUCTDETAILSVIEW) ?
          <VehiclePartDetails viewMode={this.setMode} simulationData={this.state.viewModeMDM.data} historyData={this.props}/>
        : null }

        <Modal centered className="custommodal recommMsg"
          show={this.state.showRecommendationmsg}
          onHide={this.close}
          backdrop="static"
          keyboard={false}>

            <Modal.Body>
              <div className={(this.state.showRecommendationtext.toLowerCase().includes("rejected"))?"redbackground":"greenbackground"}>{this.state.showRecommendationtext}</div>
            </Modal.Body>
        </Modal>
      </div>
    );
  }
}

/* istanbul ignore next */
const mapStateToProps = (state: any) => ({
  userDetails: state.UserDetailReducer.data,
  isLoadingData: state.UserDetailReducer.isLoadingData
})

export default connect(mapStateToProps, {})(withParams(Dashboard));

I've even wrapped the tab with React.Fragment to make sure that it returns a single root value.