React Transition Group со слайдером

Question

Я разрабатываю интерфейс с slick. js и React Transition Group. Моя проблема: у меня четыре компонента с такой иерархией:

Peintures. js NavPeinturesSer ie. js PeinturesCaroussel Card. js

Когда я нажимаю на элементы на NavPeinturesSerie, я go обновляю состояние на Peintures.js и использую componentDidUpdate для обновления рендера. Это нормально, но я хотел бы использовать переход для рендеринга.

Я использую для этого ReactTransitionGroup, но не могу получить желаемый результат.

Для получения дополнительной информации я хотел бы перейти на это видео: https://www.youtube.com/watch?v=BZRyIOrWfHU

Peintures. js

import React, { Component } from 'react';
import PeinturesCarrousel from './components/PeintureCaroussel/PeintureCaroussel'
import Request from '../../services/Api/Routes/Route';
import { motion } from 'framer-motion';
import transitionMethods from '../../script';
import CircleIndicator from '../../components/Scroll/scroll';
import NavPeintures from '../../components/NavPeinturesSerie/NavPeinturesSerie';
import { CSSTransition, TransitionGroup } from 'react-transition-group';
import './style.css'


class Peintures extends Component {
    constructor(props) {
        super(props);
        this.state = {
            peintures: [],
            isLoaded: false,
            urlPath: 'BLEU CONTRE BLOCK.II',
        }
        this.changeSerie = this.changeSerie.bind(this)
    }

    componentDidMount() {

        Request.Route('http://localhost:8080/api/v1/peintures/' + this.state.urlPath)
        .then((result) => {
            this.setState({
                isLoaded: true,
                peintures: result
            })
        })
    }  


    componentDidUpdate(pP, prevProps, sS) {

        if(this.state.urlPath !== prevProps.urlPath) {
            Request.Route('http://localhost:8080/api/v1/peintures/' + this.state.urlPath)
            .then((result) => {
                this.setState({
                    isLoaded: true,
                    peintures: result
                })
            })
        }
     }

    changeSerie(newSerie) {
        this.setState({urlPath: newSerie})
    }

    render() {

        var { isLoaded, peintures, urlPath } = this.state;

        // if(!isLoaded){
        //     return (<h1>load</h1>)
        //     console.log(this.state)
        // }

        return (
            <>
            <div 
                className="container_views"> 
                <motion.div 
                    initial="initial"
                    animate="in"
                    exit="out"
                    variants={transitionMethods.pageVariants}
                    transition={transitionMethods.pageTransition}
                    className="container_peintures">
                    <NavPeintures onSerieChange={this.changeSerie}/>
                    <CircleIndicator/>
                    <div className="container_peinture_show">
                        <div className="slider_peintures">
                            <PeinturesCarrousel data={peintures}/>
                        </div>
                    </div>
                </motion.div> 
            </div> 
            <div className="background_nav"></div>
            </>      
        );
    }
}

export default Peintures;

NavPeinturesSer ie

import React from "react";
import './style.css';
import { Link } from 'react-router-dom';

const NavPeinturesSerie = ({onSerieChange}) => {

    const test = (e) => {
        onSerieChange(e.target.textContent)
    }

    return(
        <>
            <div className="container_nav_peintures">
                <ul>
                    <li onClick={test}>BLEU CONTRE BLOCK.II</li>
                    <li onClick={test}>ENTRE LES LIGNES</li>
                    <li onClick={test}>IMPREVUE</li>
                    <li onClick={test}>RYTHME AND CAP</li>
                    <li onClick={test}>BLEU CONTRE BLOCK</li>
                    <li onClick={test}>POESIE DE L'ESPACE</li>
                    <li onClick={test}>K. AP</li>
                    <li onClick={test}>REFORME & CONTRE-REFORME</li>
                    <li onClick={test}>ESPACE PROPRE</li>
                    <li onClick={test}>CROISÉE</li>
                    <li onClick={test}>LES GRIFFES DU TEMPS</li>
                    <li onClick={test}>PRISME</li>
                    <li onClick={test}>INSTINCTS</li>
                    <li onClick={test}>ESPACE D'UN INSTANT</li>
                    <li onClick={test}>STRATES</li>
                    <li onClick={test}>HORS SÉRIE</li>
                </ul>
            </div>
        </>
    )
}

export default NavPeinturesSerie;

PeintureCaroussel. js

import React from 'react';
import { CSSTransition, TransitionGroup } from 'react-transition-group';
import Card from './Card/Card'
import Slider from 'react-slick';
import '../../style.css'

const PeinturesCarrousel = ({data}) => {


    return(
        <>   
            <TransitionGroup>
                <Slider
                    fade={true}
                    arrows={true}
                    dots={true}
                    initialSlide={0}
                > 
                    {data.map((item, i) => ( 
                        <CSSTransition
                            key={i}
                            timeout={300}
                            classNames='fade'
                        >                            
                        <Card serie={item.nom_de_la_serie} link={item.lien} alt_img={item.alt_img} title={item.nom} date={item.annee} key={i}/>
                        </CSSTransition>
                    ))} 
                </Slider> 
            </TransitionGroup>  
        </>
    )
}

export default PeinturesCarrousel;

Карточка. js

import React from 'react';
import '../../../style.css'

const Card = ({ link, alt_img, title, date, serie}) => {

    const styles = {
        cardCaroussel: {
            height: 'auto',
            display: 'flex',
            justifyContent: 'center',
            flexDirection: 'column',
            alignItems: 'center',
        },
        img: {
            width: 'auto',
            margin: 'auto auto',
            height: 'auto',
            maxHeight: '55vh'
        },
        spanYears: {
            display: 'block',
            marginBottom: '1.5vw',
            color: '#777777',
            fontFamily: 'Syncopate, sans-serif',
            fontSize: '13px'
        },
        spanTitle: {
            dislay:'block', 
            marginTop: '1.5vw',
            fontFamily: 'Syncopate, sans-serif',
            fontSize: '11px',
            color: '#000000',
        },
    }

    return(
        <>     
            <div style={styles.cardCaroussel}>
                <h2>{serie}</h2>
                <span style={styles.spanYears}>{date}</span>
                <div className="encadrement_img">
                    <img alt={alt_img} src={link} style={styles.img}/>
                </div>
                <span style={styles.spanTitle}>{title}</span>
            </div>   
        </>
    )
}

export default Card;

стиль. css

.container_peintures{
    width: 50%;
    margin: auto;
}

.container_peinture_show{
    position: absolute;
    width: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.slider_peintures{
    margin: auto;
    width: 100%;
}

.slider_peintures .slick-arrow{
    border-radius: 18px;
    box-shadow: none;
    height: 0;
}

.slider_peintures .slick-arrow:before{
    color: grey;
    font-size: 15px;
}

.slider_peintures .slick-dots{
    bottom: -50px;
}

.fade-enter{
    opacity: 0;
 }
 .fade-exit{
    opacity: 1;
 }
 .fade-enter-active{
    opacity: 1;
 }
 .fade-exit-active{
    opacity: 0;
 }
 .fade-enter-active,
 .fade-exit-active{
    transition: opacity 2000ms;
 }