React transition group实现动画时不生效问题？

const [show, setShow] = useState(false);


<button onClick={() => setShow(!show)}>click</button>

<CSSTransition 
    in={show} 
    addEndListener={
        (node, doneCallBack) =>
          node.addEventListener("transitionend", doneCallBack)
      } 
    classNames="ccc"
    >
        <div className='ddd'></div>
</CSSTransition>

.ddd {
  width: 100px;
  height: 100px;
  margin-top: 100px;
  background-color: lightblue;
  transition: opacity 1s linear;
  display: none;
}
.ccc-enter {
  opacity: 0;
  display: block;
}
.ccc-enter-active,
.ccc-enter-done {
  opacity: 1;
  display: block;
}
.ccc-exit {
  opacity: 1;
  display: block;
}
.ccc-exit-active,
.ccc-exit-done {
  opacity: 0;
  display: none;
}

点击按钮的时候，div可以动画出来；再点击让div消失的时候，就一下消失了，没有动画，怎么解决？