Render array in React one-by-one, having pauses between

Question

I'm having trouble rendering multiple Snackbars, I know it's not allowed to render multiple at once, so I tried notistack,but when I put maxSnack={1} autoHideDuration={3000} and I enqueue 2 Snackbars, then the first one disappears immediately, and I would need to make it stay for those 3 seconds. Therefore I've decided to create own solution. I have an array of messages, and I want to render Snackbars with those messages like render 1st one for 3 seconds, then 2nd one etc.

I've tried to accomplish this with setTimeout() but didn't succeed. I am not sure how to approach this problem. Here's what I got so far:

  export const NotificationsInterval = (props: INotificationsProps) => {
    const [notifications, setNotifications] = React.useState<IListItem[]>([]);

    const [currentIndex, setCurrentIndex] = React.useState<number>(0);
    const [currentItem, setCurrentItem] = React.useState<IListItem>();

    React.useEffect(() => {
        const timer = setTimeout(() => {
        setCurrentItem(props.notifications[currentIndex]);
        setCurrentIndex(currentIndex => currentIndex + 1);
    }, 1000);
    return () => clearTimeout(timer);
    }, []);

  return (
    <>
    {notifications.length !== 0 && notifications.map(n => {
    {currentItem.Title}
    })}
    </>
  );

}