Javascript 如何在组件被破坏时设置其动画？

我有一个简单的通知组件，它呈现一个通知组件数组。我想让通知淡入淡出。所以我安装了

react transition group

，并尝试了一下

不过，我不能完全让它发挥作用。当添加一个新通知时，它会淡入，但当删除一个通知时，它只会消失，而不会淡出

以下是我所拥有的：

组成部分：

export default function Notifications({ notifications }) {
  return (
    <NotificationsContainer style={{ top: 'calc(100% - ' + (4.5 * notifications.length) + 'em)'}}>
      <TransitionGroup className="notifications">
        {[...notifications].reverse().map(notification => (
          <CSSTransition key={notification.timestamp} timeout={500} classNames="notification">
            <Notification emoji={notification.emoji} />
          </CSSTransition>
        ))}
      </TransitionGroup>
    </NotificationsContainer>
  );
}