Cuando agrego un elemento mui a un componente, empiezo a recibir el Uncaught Error: Invalid hook call. error incluso cuando no uso ningún gancho.

He pasado demasiadas horas tratando de encontrar una solución, pero nada ha funcionado. Agradezco cualquier ayuda.

El error

El código (usó un booleano codificado en lugar del gancho, el error aún continúa)

 const [open, setOpen] = React.useState(false); const handleOpen = () => { setOpen(true); }; const handleClose = () => { setOpen(false); }; return ( <> <Card className="project-card-view"> <Card.Body> <Button variant="primary" onClick={handleOpen} > </Button> </Card.Body> </Card> <Modal open={true} onClose={handleClose} aria-labelledby="modal-modal-title" aria-describedby="modal-modal-description" > <Box> <Typography id="modal-modal-title" variant="h6" component="h2"> Text in a modal </Typography> <Typography id="modal-modal-description" sx={{ mt: 2 }}> Duis mollis, est non commodo luctus, nisi erat porttitor ligula. </Typography> </Box> </Modal> </>

Las importaciones del componente

 import Card from "react-bootstrap/Card"; import Button from "react-bootstrap/Button"; import Typography from '@mui/material/Typography'; import Modal from '@mui/material/Modal'; import Box from '@mui/material/Box'; import React from "react";

paquete.json

 { "name": "test", "version": "0.0.1", "private": true, "dependencies": { "bootstrap": "^5.1.3", "react": "^17.0.2", "react-bootstrap": "^2.2.1", "react-dom": "^17.0.2", "react-router-dom": "^6.2.2", "react-scripts": "5.0.0", "@material-ui/core": "^4.12.4", "@mui/material": "^5.8.4", "@mui/icons-material": "^5.8.4" }