title: No transition between exited and entering states in react transition group
body: <p>I am creating a HOC that animates a bunch of child components using TransitionGroup and Transition from <code>react-transition-group</code>, to achieve a "fade-in" "fade-out" effect. 
  My component looks something like this:</p>
  
  <pre><code>const defaultStyle = (duration: number) =&gt; ({
     transition: `opacity ${duration}ms ease-in-out`,
     opacity: 0,
  });
  
  const transitionStyles: any = {
     entering: {opacity: 1},
     entered: {opacity: 1},
     exiting: {opacity: 0},
     exited: {opacity: 0},
  };
  export const FadeAnimation: FC&lt;FadeAnimationProps&gt; = ({
     duration,
     children
  }) =&gt; {
     const elements = React.Children.toArray(children);
  
     return (
         &lt;TransitionGroup component={null}&gt;
             {elements.map((child, index) =&gt; {
                 return (
                     &lt;Transition timeout={duration} key={index}&gt;
                         {(transitionState: string) =&gt; {
                             return React.cloneElement(child as ReactElement, {
                                 style: {...defaultStyle(duration), 
                                         ...transitionStyles[transitionState]},
                             });
                         }}
                     &lt;/Transition&gt;
                 );
             })}
         &lt;/TransitionGroup&gt;
     );
  };
  </code></pre>
  
  <p>However, i cannot get the fade in transition to work, and my components appear with an opacity of 1.
  when i do a console.log of the style per state, I do get <code>opacity: 0</code> for exiting, then an <code>opacity: 1</code> for entering. But no transition between those states.</p>
  
  <p>Am I using this library wrong ? Is there something I am missing with the animations parameters ?</p>
  
  <p>Demo : <a href="https://jsfiddle.net/4e2xgrtf/2/" rel="nofollow noreferrer">https://jsfiddle.net/4e2xgrtf/2/</a></p>
  
  <p>In the demo, in the console, you can see the state as well as the style that goes with it. if you click on "add item" you will see the new item with the state (exited/ opacity 0) and then (entering/opacity 1) but no animation is applied.</p>