Как исправить кучу рендеров React

Я пытаюсь самостоятельно сделать всплывающие окна в ReactJS у меня есть состояние с массивом объектов, объект в этом массиве и есть уведомление. Этот массив я передаю в компонент обертку и оттуда рендерю каждый Alert,

Сам state:

const [notification, setNotification] = React.useState([
    {
      notificationText: 'Hello world!',
      severity: 'success',
      title: 'Not error!',
    },
    {
      notificationText: 'Bye world!',
      severity: 'success',
      title: 'Not succes!',
    },
  ]);

Alert обертка

  <Stack sx={{ width: '100%' }} spacing={2}>
      {notification.map((item, i) => (
        <AlertItem
          key={item.notificationText + i}
          item={item}
          {...item}
          closeNotification={closeNotification}
        />
      ))}
  </Stack>

Функция удаления элемента из массива

  const closeNotification = (item) => {
    let filteredNots = notification.filter((el) => el !== item);
    setNotification(filteredNots);
  };

Сам компонент тут то и возникает проблема ререндеров

const AlertItem = ({ item, notificationText, severity, title, closeNotification }) => {
  React.useEffect(() => {
    setTimeout(() => {
      closeNotification(item);
    }, 5000);
  }, []);

  return (
    <Alert onClose={() => closeNotification(item)} severity={severity}>
      <AlertTitle>{title}</AlertTitle>
      {notificationText}
    </Alert>
  );
};

проблема - когда в массиве например 4 элемента количество ререндеров с каждым разом растет на 2 (сначала 4 потом 6 потом 8 и т.д), с чем это связано??

Как это исправить? Буду ОЧЕНЬ благодарен ответу!