cdbootstrap stepper showing error like this- export 'CDBStepper' (imported as 'CDBStepper') was not found in 'cdbreact'

Question

WARNING in ./src/egamestudio/host/dashboard/sample/sample.jsx 141:97-107 export 'CDBStepper' (imported as 'CDBStepper') was not found in 'cdbreact' (possible exports: CDBAccordion, CDBAlert, CDBAnimation, CDBBadge, CDBBox, CDBBreadcrumb, CDBBtn, CDBBtnGrp, CDBBtnTb, CDBCard, CDBCardBody, CDBCarousel, CDBCarouselInner, CDBCarouselItem, CDBCloseIcon, CDBCol, CDBCollapse, CDBContainer, CDBDataTable, CDBDropDown, CDBDropDownItem, CDBDropDownMenu, CDBDropDownToggle, CDBFooter, CDBFooterLink, CDBHamburgerToggler, CDBIcon, CDBIframe, CDBInput, CDBInputGroup, CDBJumbotron, CDBLink, CDBListGroup, CDBListGroupItem, CDBMask, CDBModal, CDBModalBody, CDBModalFooter, CDBModalHeader, CDBNavBrand, CDBNavItem, CDBNavLink, CDBNavToggle, CDBNavbar, CDBNavbarNav, CDBPageItem, CDBPageLink, CDBPagination, CDBProgress, CDBRating, CDBRow, CDBSelect, CDBSidebar, CDBSidebarContent, CDBSidebarFooter, CDBSidebarHeader, CDBSidebarMenu, CDBSidebarMenuItem, CDBSlider, CDBSmoothScroll, CDBSpinner, CDBSwitch, CDBTable, CDBTableBody, CDBTableHeader, CDBView)

import React, { useState } from "react";
import {CDBStepper,CDBStep} from "cdbreact";
import Login from "../../users/login";


export const Sample = () => {
  const [active, setActive] = useState(1);

  const handleNextPrevClick = a => {
    setActive(a);
  };
    return (
      <>
          
             <CDBStepper direction="vertical" >
        <CDBStep
          id={1}
          icon="pencil-alt"
          name="Basic Information"
          handleClick={() => handleNextPrevClick(1)}
          active={active}
          component={<Login handleNextPrevClick={handleNextPrevClick} />}
        />
        <CDBStep
          id={2}
          icon="info-circle"
          name="Personal Data"
          handleClick={() => handleNextPrevClick(2)}
          active={active}
          component={<Login handleNextPrevClick={handleNextPrevClick} />}
        />
        <CDBStep
          id={3}
          icon="book-reader"
          name="Terms and Conditions"
          handleClick={() => handleNextPrevClick(3)}
          active={active}
          component={<Login handleNextPrevClick={handleNextPrevClick} />}
        />
        <CDBStep
          id={4}
          icon="check"
          name="Finish"
          handleClick={() => handleNextPrevClick(4)}
          active={active}
          component={<Login handleNextPrevClick={handleNextPrevClick} />}
        />
      </CDBStepper>
      </>
     
  );
};

export default Sample;

I'm using the react js and getting the error like this -export 'CDBStepper' (imported as 'CDBStepper') was not found in 'cdbreact' enter image description here