Material-ui when closing the dialog it wont let me touch my page

Question

So after i close the dialog box of material-ui, somehow i can't click or touch anything in my page

useState:

const [open, setOpen] = useState(false);

Function:

  const handleClose = () => {
setOpen(false);

};

Tag:

        <Dialogopen={open}TransitionComponent={Transition}keepMountedonClose={handleClose}></Dialog>

Answer 1

Just had this issue in codesandbox and resolved it by making sure the Transition is at the highest level, not inside any functions, where the imports are.

import Button from "@mui/material/Button";

const Transition = React.forwardRef(function Transition(props, ref) {
  return <Slide direction="up" ref={ref} {...props} />;
});

export default function ActionAreaCard() {