Why doesn't CSSTransition work?

Question

React

I'm trying to animate one element in react. I looked at an example from the CSSTransition documentation. Poshamanil a bit with styles, but the animation does not work

<button onClick={() => seIsVisibility(!isVisibility)}>{isVisibility.toString()}</button>
  <CSSTransition
        in={isVisibility}
        timeout={2000}
        classNames={"alert"}
   >
      <div className={cl.box}>{isVisibility.toString()}</div>
   </CSSTransition>

.box {
  width: 100px;
  height: 100px;
  margin: 50px;
  text-align: center;
}

.alert-enter {
  background-color: teal;
}
.alert-enter-active {
  background-color: red;
  transition: background-color 2000ms ease-in;
}
.alert-enter-done {
  background-color: red;
}
.alert-exit {
  background-color: red;
}
.alert-exit-active {
  background-color: teal;
  transition: background-color 2000ms ease-in;
}
.alert-exit-done {
  background-color: teal;
}

What I noticed:
1) classes are added to the div, but only after the button is clicked - i.e. when initially rendered, they are not in the div
2) in the CSSTransition component props (unmountOnExit, mountOnEnter) work out as they should if added
3) when the state "isVisibility" in props in changes, a warning appears in the console

spoiler

Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Transition which is inside StrictMode. Instead, add a ref directly to the element you want to reference. Learn more about using refs safely here: https://reactjs.org/link/strict-mode-find-node

But as I understand it should not affect performance.

What's wrong? A long time ago I got animation, and now I'm back to studying and something is going wrong ((