1 files changed, 14 insertions, 12 deletions

diff --git a/src/components/ui/effects/Appear.tsx b/src/components/ui/effects/Appear.tsx
index 2076f6ba6..0868271f3 100644
--- a/src/components/ui/effects/Appear.tsx
+++ b/src/components/ui/effects/Appear.tsx
@@ -1,5 +1,5 @@
 import { ReactElement, ReactNode, useEffect, useState } from 'react';
-import { CSSTransitionGroup } from 'react-transition-group';
+import { TransitionGroup, CSSTransition } from 'react-transition-group';
 
 interface IProps {
   children: ReactNode;
@@ -7,7 +7,6 @@ interface IProps {
   className?: string;
   transitionAppear?: boolean;
   transitionLeave?: boolean;
-  transitionAppearTimeout?: number;
   transitionEnterTimeout?: number;
   transitionLeaveTimeout?: number;
 }
@@ -18,7 +17,6 @@ const Appear = ({
   className = '',
   transitionAppear = true,
   transitionLeave = true,
-  transitionAppearTimeout = 1500,
   transitionEnterTimeout = 1500,
   transitionLeaveTimeout = 1500,
 }: IProps): ReactElement | null => {
@@ -33,17 +31,21 @@ const Appear = ({
   }
 
   return (
-    <CSSTransitionGroup
-      transitionName={transitionName}
-      transitionAppear={transitionAppear}
-      transitionLeave={transitionLeave}
-      transitionAppearTimeout={transitionAppearTimeout}
-      transitionEnterTimeout={transitionEnterTimeout}
-      transitionLeaveTimeout={transitionLeaveTimeout}
+    <TransitionGroup
+      appear={transitionAppear}
+      exit={transitionLeave}
       className={className}
     >
-      {children}
-    </CSSTransitionGroup>
+      <CSSTransition
+        classNames={transitionName}
+        timeout={{
+          enter: transitionEnterTimeout,
+          exit: transitionLeaveTimeout,
+        }}
+      >
+        {children}
+      </CSSTransition>
+    </TransitionGroup>
   );
 };