React Bootstrapで何も表示されない

前提

React-Bootstrapを使用しています。
下記URLのOffcanvasの実装をしたいです。
https://react-bootstrap.github.io/components/offcanvas/

発生している問題・エラーメッセージ

コンソールを確認すると書きエラーメッセージ
Uncaught Error: Target container is not a DOM element.

import {render} from 'react-dom';
でrenderをインポートしました

こちらの記述をすると画面に何も表示されなくなります。
render(<Example />);

該当のソースコード

App.js

import logo from './logo.svg';
import './App.css';
import { useState } from 'react';
import { useEffect } from 'react';
import Offcanvas from 'react-bootstrap/Offcanvas';
import Button from 'react-bootstrap/Button';
import {render} from 'react-dom';

function App() {

  return (
<div>
  <Example/>
</div>

  );
  
  
}

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>
    </>
  );
}

render(<Example />);

export default App;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();