When I add a mui element to a component, I start getting the Uncaught Error: Invalid hook call. error even when I don't use any hooks.

I have spent way too many hours trying to find a solution but nothing has worked. I appreciate any help.

The Error

The Code (used a hardcoded boolean instead of the hook, the error still continues)

  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>

  </>

The imports of the component

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";

package.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"
  }