I want to make this react component using bootstraps Offcanvas-component. It’s an example from the React-bootstrap webpage.

import { useState } from 'react';
import Button from 'react-bootstrap/Button';
import Offcanvas from 'react-bootstrap/Offcanvas';

function Example() {
  const [show, setShow] = useState(false);

  const handleClose = () => setShow(false);
  const handleShow = () => setShow(true);

  return (
    <>
      <Button variant="primary" onClick={handleShow}>
        Launch
      </Button>

      <Offcanvas show={show} onHide={handleClose}>
        <Offcanvas.Header closeButton>
          <Offcanvas.Title>Offcanvas</Offcanvas.Title>
        </Offcanvas.Header>
        <Offcanvas.Body>
          Some text as placeholder. In real life you can have the elements you
          have chosen. Like, text, images, lists, etc.
        </Offcanvas.Body>
      </Offcanvas>
    </>
  );
}

export default Example;

But I got this error:

**error message using row element of bootstrap: TS2786: Row cannot be used as a JSX component. Its return type ReactNode is not a valid JSX element. Type undefined is not assignable to type Element | null**

I tried importing all the packages again and installing bootstrap again. I even checked my package.json file but the problem isn’t solved. I have the problem with all the bootstrap components