Реагировать на проблему окончания анимации

Я делаю простую службу уведомлений в React и столкнулся с очень странной проблемой, о которой я не могу найти ни упоминания, ни решения.

Мой компонент имеет массив сообщений уведомлений. Каждое «уведомление» имеет привязку «onClick» и «onAnimationEnd», которая вызывает функцию, которая удалит их из массива уведомлений. Основная идея заключается в том, что уведомление исчезнет (с помощью CSS-анимации), а затем будет удалено или позволит пользователю вручную щелкнуть уведомление, чтобы удалить его.

Интересный баг заключается в следующем. Если вы добавите два уведомления, первое вызовет onAnimationEnd и удалит себя. Оставшееся уведомление внезапно перейдет к концу своей CSS-анимации и никогда не вызовет собственное onAnimationEnd.

Еще более любопытно, что если вы добавите четыре уведомления, ровно два из них будут иметь указанную выше ошибку, а два других будут работать правильно.

Стоит также отметить, что если вы создадите два уведомления и щелкнете по одному из двух вручную, чтобы удалить его, оставшееся уведомление будет работать нормально и запускать свою собственную функциональность onAnimationEnd.

Таким образом, я вынужден сделать вывод, что какая-то комбинация циклического обхода массива и триггера onAnimationEnd каким-то образом прослушивается в реакции, если только кто-то не может указать решение этой проблемы.

Код реакции

class Test extends React.Component {
    constructor (props) {
    super(props)
    this.state = {
      notifications: []
    }
  }

  add = () => {
    this.setState({notifications: [...this.state.notifications, 'Test']})
  }

  remove = (notification) => {
    let notificationArray = this.state.notifications
    notificationArray.splice(notificationArray.indexOf(notification), 1)
    this.setState({notifications: notificationArray})
  }

  render() {
    return (
      <div>
        <button onClick = {this.add}>Add Notification</button>
        <div className = "notification-container">
        {this.state.notifications.map(
          (notification,i) => {
            return (
              <div onAnimationEnd = {()=>this.remove(notification)} 
                   onClick = {() => this.remove(notification)}
                   className = "notification" 
                   key = {i}>
                   {notification}
              </div>
            )
          }
        )}
        </div>
      </div>
    );
  }
}


ReactDOM.render(
  <Test />,
  document.getElementById('root')
);

CSS

.notification-container {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 200px;
}

.notification {
  border: 1px solid;
  box-shadow: 0 10px 20px rgba(0,0,0,0.2), 0 6px 6px rgba(0,0,0,0.25);
  color: white;
  background: rgba(0,0,0,0.75);
  cursor: pointer;
  padding: 10px;
  margin-top: 10px;
  user-select: none;
  animation: fade 7s linear forwards;
}

@keyframes fade {
  0% {
    transform: translate(100%,0);
  }
  2% {
    transform: translate(-20px, 0);
  }
  5% {
    transform: translate(0,0);
  }
  20% {
    opacity: 1;
  }
  100% {
    opacity: 0.25;
  }
}

Рабочая ссылка на кодепен https://codepen.io/msorrentino/pen/xeVrwz