I'm building a web app with Material UI. I'm trying to make a notification stack using Alert. (I know notistack, but I don't like it.)

I think about the following...

1. I have to have a stack of notifications.
2. The app stacks the notifications.
3. When the user clicks a button, it shows all the notifications that are in the stack.

To implement this I think I should use Alert + Collapse. One big problem I see is that every Collapse needs a hook (created with useState). I'm not quite sure how to do this. Also, using the AllNotify array (see the code that follows) as the notification stack is not working.

Can someone help me?

let AllNotify = [];

export const NotifyPush = (severity,msg) => {
    AllNotify.push({severity: severity, msg: msg});
};

const NotifyBalloon = (notify) => {
    //const [open, setOpen] = useState(true);

    return (
        <Collapse in={true}>
            <Alert sx={{boxShadow: 2}}
                   icon={<CheckIcon fontSize="inherit" />} severity={notify.severity}
                   action={
                       <IconButton
                           aria-label="close"
                           color="inherit"
                           size="small"
                           onClick={() => {}}
                       >
                           <CloseIcon fontSize="inherit" />
                       </IconButton>
                   }>
                {notify.msg}
            </Alert>
        </Collapse>
    );
};


export const NotifyStack = (props) => {
    return (
        <Stack sx={{ width: '95%' }} spacing={1}>
            {
                AllNotify.reverse().map((notify) => NotifyBalloon(notify))
            }
        </Stack>
    );
};