начало анимации при смене содержимого

src/components/mainPart/mainPart.tsx

@@ -4,7 +4,7 @@ import { MainPartHeader } from "./mainPartHeader";
 import { ContentContainer } from "./contentContainer";
 import { MainPartFooter } from "./main-part-footer";
 import { OrLineContainer } from "./orLineContainer";
-import { CSSTransition, TransitionGroup } from "react-transition-group";
+import { CSSTransition, SwitchTransition, TransitionGroup } from "react-transition-group";
 import { CalendarComponent } from "./calendar/calendar";
 import { PlanContentContainer } from "./planContentContainer";
 import { TimeSelector } from "./timeSelector/timeSelector";
@@ -51,7 +51,7 @@ export const MainPart: React.FC = React.memo(() => {
     }
 
     function onClickStartDemo() {
-        console.log(lang)
+        setChangeContent(changeContent + 1);
         setCurrentContent(
             <>
                 <ContentContainer 
@@ -71,7 +71,7 @@ export const MainPart: React.FC = React.memo(() => {
     } 
 
     function onClickCreateNewDemo() {
-        console.log(lang)
+        setChangeContent(changeContent + 1);
         setCurrentContent(
             <ContentContainer 
                 // titleText="Демонстрация запущена"
@@ -85,6 +85,7 @@ export const MainPart: React.FC = React.memo(() => {
     }
 
     function onClickPlaneDemo() {
+        setChangeContent(changeContent + 1);
         enableBackground();
         setPlaneContent(
             <PlanContentContainer 
@@ -166,17 +167,18 @@ export const MainPart: React.FC = React.memo(() => {
     return <div className="main-part-container">
         <div className="background-image"></div>
         <MainPartHeader changeLang={(lang) => changeLang(lang)} onClickLogo={toMain}/>
-        <TransitionGroup>
+        <SwitchTransition mode="out-in">
             <CSSTransition
                 key={changeContent}
-                timeout={300}
+                //@ts-ignore
+                addEndListener={(node, done) => node.addEventListener("transitionend", done, false)}
                 classNames={'change-main-part-content'}
             >
                 <div className="main-part-content">            
                     {currentContent}                
                 </div>
             </CSSTransition>            
-        </TransitionGroup>        
+        </SwitchTransition>        
         {
             planContent ?
             <div className="main-part-plan-content">