MUI snackbar div persist on DOM after being closed

Question

I created a global modal with the purpose of only calling it when I need it, but the problem is that the snackbar div persists in the DOM and this causes certain elements to be blocked because they are below this div. Any idea what the problem would be?

My GlobalAlert component:

export function GlobalAlert() {
  const {alertState, handleClose} = useAlertContext();
  const {open, type, message} = alertState;

  function TransitionDown(props: TransitionProps) {
    return <Slide {...props} direction="down" />;
  }

  return (
    <Snackbar
      key={"top" + "center"}
      TransitionComponent={TransitionDown}
      anchorOrigin={{vertical: "top", horizontal: "center"}}
      autoHideDuration={4000}
      disableWindowBlurListener={true}
      open={open}
      onClose={handleClose}
    >
      <Alert severity={type} sx={useStyles.alert} variant="filled" onClose={handleClose}>
        {message}
      </Alert>
    </Snackbar>
  );
}

Context where I get the info

const AlertContextProvider = (props: any) => {
  const [alertState, setAlertState] = React.useState<AlertState>({
    open: false,
    type: "error",
    message: "",
  });

  const handleClose = React.useCallback((event?: React.SyntheticEvent | Event, reason?: string) => {
    if (reason === "clickaway") {
      return;
    }
    setAlertState({
      open: false,
      type: "error",
      message: "",
    });
  }, []);

  const value = React.useMemo(
    () => ({
      alertState,
      setAlertState,
      handleClose,
    }),
    [alertState, handleClose],
  );

  return <AlertContext.Provider value={value} {...props} />;
};

Bug image