Why doesn't animation work in react?

Question

React

Hello.
I'm making a chat with react/redux . On the page, I get an array from redux with all the dialogs and a loop for drawing an open button for each of them.
You need to add an animation to open each dialog.
To do this, I add the field animate = true to the opened dialog reducer ;
And when rendering the page, I check if this field is true, then I add the dialog_animate
class to the element. Here is the component code:

class PageDialogs extends Component {
   sortDialogs(dialogs){
      return dialogs.sort(function(a, b){
         if (a.openedAt < b.openedAt) {
            return -1;
         }
         else if (a.openedAt > b.openedAt) {
            return 1;
         }
         else {
            return 0;
         }
      });
   }
   showDialogs(){
      return this.props.dialogs.map(function(dialog, key){
         if (dialog.active) {
            return (
               <div key={key} className={dialog.animate ? 'dialog_animate' : ''} >
                  <Dialog  dialog={dialog} />
               </div>
            );
         }
      })
   }
   render() {
      if (typeof this.props.dialogs !== 'undefined') {
         return (
            <div>
               <div className='page-dialogs'>
                  {this.showDialogs()}
               </div>
            </div>
         );
      }
      else {
         return (
            <div>
               <Preloader />
            </div>
         )
      }
   }
}

And just in case class styles :)

.dialog_animate {
  animation: dialog_animate 5s ease-in-out forwards;
  -webkit-animation: dialog_animate 5s ease-in-out forwards;
}

This is how the animation works. But I need this.props.dialogs to sort first. And if I replace this.props.dialogs with this.sortDialogs(this.props.dialogs) then strange things begin. Then the animation starts to work only 1 time. And not in the sense that only for the first object, namely once. That is, if I open several chats within 5 seconds that the animation lasts, then the animation will start on the first one and end on the last one, and on the subsequent ones it will no longer be. I must say right away that the dialog_animate
class for chats is added correctly, for the opened one it is added, and for all the others it is removed. What could be the reason and how can it be fixed? Thank you.