reactjs - هیچ انتقالی بین حالتهای خارجشده و واردشونده در گروه انتقال واکنش وجود ندارد

من یک HOC ایجاد میکنم که گروهی از کامپوننتهای فرزند را با استفاده از TransitionGroup و Transition از react-transition-group انیمیت میکند تا یک افکت «نمایش تدریجی» و «ناپدید شدن تدریجی» به دست آورم. کامپوننت من چیزی شبیه به این است:

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>
   );
};

با این حال، من نمیتوانم افکت گذر تدریجی (fade in) را فعال کنم و اجزاء من با شفافیت ۱ ظاهر میشوند. وقتی یک console.log از سبکها در هر حالت میگیرم، برای خروج opacity: 0 و سپس برای ورود opacity: 1 را دریافت میکنم. اما هیچ گذر بین این حالات وجود ندارد.

آیا من دارم از این کتابخانه اشتباه استفاده میکنم؟ آیا چیزی در پارامترهای انیمیشنها از دستم در رفته است؟

نمایش: https://jsfiddle.net/4e2xgrtf/2/

در نسخه نمایشی، در کنسول، شما میتوانید وضعیت و همچنین سبک مرتبط با آن را ببینید. اگر روی «افزودن مورد» کلیک کنید، مورد جدید را با وضعیت (خروج/شفافیت 0) و سپس (ورود/شفافیت 1) خواهید دید، اما هیچ انیمیشنی اعمال نمیشود.