React MUI Alert not displaying with SnackBar

I created a custom Alert as shown below, but when I add Snackbar, it is not displaying. Here is the part that I changed, the rest is the same:

AlertPopup:

const AlertPopup = () => {
  const { text, type } = useAlert();

  if (text && type) {
    return (

      // when I use this, the message is displayed
      // <Alert variant="filled" severity={type} sx={{}}>
      //   {text}
      // </Alert>

      // when I use this, the message is NOT displayed
      <Stack spacing={2} sx={{ width: '100%' }}>
      <Snackbar autoHideDuration={6000}>
      {/* <Alert severity={type} sx={{ width: '100%' }}> */}
      <Alert variant="filled" severity={type} >
        {text}
      </Alert>
      </Snackbar>
      </Stack>

    );
  } else {
    return <></>;
  }
};

Here is the other parts of the implementation. I did not changed anything as there is not specific component for Alert:

AlertContext:

const ALERT_TIME = 6000;
const initialState = {
  text: "",
  type: "",
};

const AlertContext = createContext({
  ...initialState,
  setAlert: () => {},
});

export const AlertProvider = ({ children }) => {
  const [text, setText] = useState("");
  const [type, setType] = useState("");

  const setAlert = (text, type) => {
    setText(text);
    setType(type);

    setTimeout(() => {
      setText("");
      setType("");
    }, ALERT_TIME);
  };

  return (
    <AlertContext.Provider
      value={{
        text,
        type,
        setAlert,
      }}
    >
      {children}
    </AlertContext.Provider>
  );
};

useAlert:

const useAlert = () => useContext(AlertContext);

export default useAlert;

So, what is missing with this implementation?