No transition between exited and entering states in react transition group

Question

I am creating a HOC that animates a bunch of child components using TransitionGroup and Transition from react-transition-group, to achieve a "fade-in" "fade-out" effect. My component looks something like this:

const defaultStyle = (duration: number) => ({
   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<FadeAnimationProps> = ({
   duration,
   children
}) => {
   const elements = React.Children.toArray(children);

   return (
       <TransitionGroup component={null}>
           {elements.map((child, index) => {
               return (
                   <Transition timeout={duration} key={index}>
                       {(transitionState: string) => {
                           return React.cloneElement(child as ReactElement, {
                               style: {...defaultStyle(duration), 
                                       ...transitionStyles[transitionState]},
                           });
                       }}
                   </Transition>
               );
           })}
       </TransitionGroup>
   );
};

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 opacity: 0 for exiting, then an opacity: 1 for entering. But no transition between those states.

Am I using this library wrong ? Is there something I am missing with the animations parameters ?

Demo : https://jsfiddle.net/4e2xgrtf/2/

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.