React err: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined

Question

I'm developing a project with React.(It's learning project. I'm new at React) I'm using React-Bootstrap for UI. I'm designing the navbar now. I want to make an offcanvas that will be valid before the md breakpoint, but I am getting the error mentioned in the title. I couldn't try anything because I don't fully understand the error. I am getting the error from HomepageNavbar component. I also wrote my codes in that component.

First of all, I designed classic Navbar and it worked. Then I added Offcanvas and I got the error.

It was working:

<Navbar bg="transparent" variant="light">
         <Container className="justify-content-center justify-content-md-between">
             <Col md={4}>
                 <Navbar.Brand href="#home">
                     <img
                         alt=""
                         src={logo}
                         className="d-inline-block align-top"
                     />
                 </Navbar.Brand>
             </Col>
             <Col md={8} className="text-end text-xl-center">
                 <Nav
                     className="d-none d-md-block"
                     color="black"
                     style={{
                         fontSize: '.9rem',
                         fontWeight: 'bold',
                     }}
                 >
                     <Nav.Link className="d-inline" href="#home">Eğitim Paketlerimiz</Nav.Link>
                     <Nav.Link className="d-inline" href="#features">Örnek Videolar</Nav.Link>
                     <Nav.Link className="d-inline" href="#pricing">Yorumlar & Başarılarımız</Nav.Link>
                     <Nav.Link className="d-none d-lg-inline" href="#x">Yardım</Nav.Link>
                     <Nav.Link className="d-none d-lg-inline" href="#y">Biz Kimiz</Nav.Link>
                     <Nav.Link className="d-none d-xl-inline" href="#z">Bize Ulaşın</Nav.Link>
                 </Nav>
             </Col>
         </Container>
</Navbar>

it doesn't work anymore and I get the error mentioned in the title:

<Navbar bg="transparent" variant="light">
         <Container className="justify-content-center justify-content-md-between">
             <Col md={4}>
                 <Navbar.Brand href="#home">
                     <img
                         alt=""
                         src={logo}
                         className="d-inline-block align-top"
                     />
                 </Navbar.Brand>
             </Col>
             <Col md={8} className="text-end text-xl-center">
                 <Nav
                     className="d-none d-md-block"
                     color="black"
                     style={{
                         fontSize: '.9rem',
                         fontWeight: 'bold',
                     }}
                 >
                     <Nav.Link className="d-inline" href="#home">Eğitim Paketlerimiz</Nav.Link>
                     <Nav.Link className="d-inline" href="#features">Örnek Videolar</Nav.Link>
                     <Nav.Link className="d-inline" href="#pricing">Yorumlar & Başarılarımız</Nav.Link>
                     <Nav.Link className="d-none d-lg-inline" href="#x">Yardım</Nav.Link>
                     <Nav.Link className="d-none d-lg-inline" href="#y">Biz Kimiz</Nav.Link>
                     <Nav.Link className="d-none d-xl-inline" href="#z">Bize Ulaşın</Nav.Link>
                 </Nav>
             </Col>

             //The following are the places I added later. got it from this link: https://react-bootstrap.netlify.app/components/navbar/#navbar-offcanvas

             <Navbar.Toggle className="d-inline d-md-none" aria-controls="offcanvasNavbar" />
             <Navbar.Offcanvas
                 id="offcanvasNavbar"
                 aria-labelledby="offcanvasNavbarLabel"
                 placement="end"
             >
                 <Offcanvas.Header closeButton>
                     <Offcanvas.Title id="offcanvasNavbarLabel">Offcanvas</Offcanvas.Title>
                 </Offcanvas.Header>
                 <Offcanvas.Body>
                     <Nav className="justify-content-end flex-grow-1 pe-3">
                         <Nav.Link href="#action1">Home</Nav.Link>
                         <Nav.Link href="#action2">Link</Nav.Link>
                         <NavDropdown title="Dropdown" id="offcanvasNavbarDropdown">
                             <NavDropdown.Item href="#action3">Action</NavDropdown.Item>
                             <NavDropdown.Item href="#action4">Another action</NavDropdown.Item>
                             <NavDropdown.Divider />
                             <NavDropdown.Item href="#action5">
                                 Something else here
                             </NavDropdown.Item>
                         </NavDropdown>
                     </Nav>
                     <Form className="d-flex">
                         <FormControl
                             type="search"
                             placeholder="Search"
                             className="me-2"
                             aria-label="Search"
                         />
                         <Button variant="outline-success">Search</Button>
                     </Form>
                 </Offcanvas.Body>
             </Navbar.Offcanvas>
         </Container>
 </Navbar>

Full error:

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of HomepageNavbar.

Things I imported:

import Nav from 'react-bootstrap/Nav'
import Container from 'react-bootstrap/Container'
import Col from 'react-bootstrap/Col'
import Navbar from 'react-bootstrap/Navbar'
import Offcanvas from 'react-bootstrap/Offcanvas'
import NavDropdown from 'react-bootstrap/NavDropdown'
import Button from 'react-bootstrap/Button'
import Form from 'react-bootstrap/Form'
import FormControl from 'react-bootstrap/FormControl'

Answer 1

Check the version of bootstrap and react-bootstrap, in my case it was out of date (2.0.0-beta.6").

After updating to the lastest version (at the moment bootstrap: 5.1.3 and react-bootstrap: 2.2.1) it works fine.