Material UI Snackbar Won't dismiss

Question

I'm trying to dismiss the snackbar by click away and by clicking on the "X" on the snackbar but it just won't go away, it should go away after 10s but it doesn't! I don't what i'm missing

const Footer = () => {

const [snackbarState, setSnackbarState] = useState({
  open: false,
  Transition: Slide,
  });

  const [subscribeSuccess, setSubSuccessMsg] = useState({
    success: false,
    msg: "",
    });

    const handleSuccessClose = (event, subscribeSuccess) => {
      if (subscribeSuccess === 'clickaway') {
          return;
      }
      setSubSuccessMsg({ success: true, msg: ""});
      };

      return (
        {subscribeSuccess &&
          <Snackbar
              position="static"
              TransitionComponent={snackbarState.Transition}
              anchorOrigin={{
              vertical: "top",
              horizontal: "center",
              }}
              open={subscribeSuccess.success}
              // message={registerErr.msg}
              autoHideDuration={10000}
              onClose={handleSuccessClose}
              sx={{ width: {xs: "100%", sm: "100%", 
              md: "100%", lg: "70%"} }}>
                  <Alert
                  onClose={handleSuccessClose} 
                  severity="success" 
                  sx={{ width: '100%',
                          '& .MuiAlert-message':{
                          textAlign:"center", width:"inherit" }}}>
                          {subscribeSuccess.msg}
                  </Alert>
          </Snackbar>
      }
      )
    }

Answer 1

you need to set open prop of Snackbar to false in onClose handler. in your case set your subscribeSuccess.success to false

const handleSuccessClose = (event, subscribeSuccess) => {
      if (subscribeSuccess === 'clickaway') {
          return;
      }
      setSubSuccessMsg({ success: false, msg: ""});
      };

(dont know what that is condition purpose)