Tengo un componente de reacción y estoy tratando de pegar Bootstrap Modal. Cuando lo pego en el componente, mi página aparece en blanco y hay errores en la consola. Mi componente:

 import { observer } from 'mobx-react-lite'; import React, { useEffect,useRef,useState } from 'react' import 'bootstrap/dist/css/bootstrap.min.css'; import {Modal, Button} from 'react-bootstrap'; const Canvas = observer(() => { const canvasRef=useRef() useEffect(()=>{ canvasState.setCanvas(canvasRef.current) toolState.setTool(new Brush(canvasRef.current)) }, []) return ( <> <div className="canvas"> /* This is Modal component causing errors */ <Modal show={true} onHide={()=>{}}> <Modal.Header closeButton> <Modal.Title>Modal heading</Modal.Title> </Modal.Header> <Modal.Body>Woohoo, you're reading this text in a modal!</Modal.Body> <Modal.Footer> <Button variant="secondary" onClick={()=>{}}> Close </Button> </Modal.Footer> </Modal> <canvas onMouseDown={()=>mouseDownHandler()} ref={canvasRef} width={600} height={400}></canvas> </div> </> ) }); export default Canvas;

Los errores

Instalé react-bootstrap usando el comando npm install react-bootstrap bootstrap . También he incluido estilos en mi archivo index.html

 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" />

¿Cual podría ser el problema?