CSSTransition group problem with mounting

Question

Hello I have problem with CSSTransition package. When I get an 'error' and then successfully fetch City I got overflowing elements. They are outside of the box for a second, and after this time they go to the right position. How can I fix it?

CODE:

<React.Fragment>
            <div className={styles.weatherDataBox}>
            <CSSTransition mountOnEnter unmountOnExit in={weatherCtx.error} timeout={500} classNames='weather' >
            {content}
               
            </CSSTransition>
            <CSSTransition mountOnEnter unmountOnExit in={success}  timeout={500} classNames='weather' >
            <div className={styles.weatherDataBox}>{content}</div>
            </CSSTransition>
            </div>
        </React.Fragment>

CSS:

.weather-enter {
    opacity: 0;
    transition: opacity 250ms;
  }
  .weather-enter-active {
    opacity: 1;
    transition: opacity 250ms;
  }
  .weather-exit {
    opacity: 0;
    
  }
  .weather-exit-active {
    opacity: 0;
    
  }

  .weather-exit-done {
      opacity: 0;
  }

  .error-enter {
    opacity: 0;
    transition: opacity 250ms;
  }
  .error-enter-active {
    opacity: 1;
    transition: opacity 250ms;
  }
  .error-exit {
    opacity: 0;
    
  }
  .error-exit-active {
    opacity: 0;
    
  }