Компонент должен получать класс active, когда слайд, в котором он находится, активен, но этого не происходит. Как это исправить?

Question

[Shalindor]

Компонент должен получать класс active, когда слайд, в котором он находится, активен, но этого не происходит. Класс получает только компонент в первом слайде. Как это исправить?

Для слайдера использую библиотеку swiper react.

Компонент слайдера:

import React, { ReactNode, useState } from 'react';
import classes from './CardSlider.module.css';
import { Navigation } from 'swiper';
import SliderNav from 'shared/ui/buttons/SliderNav/SliderNav';
import { Swiper } from 'swiper/react';
import 'swiper/css';
import 'swiper/css/navigation';

interface propsType {
    children: ReactNode;
    className: string;
}
interface SwiperType {
    realIndex: number;
}
const CardSlider: React.FC<propsType> = ({ children, className }) => {
    const [activeSlide, setActiveSlide] = useState(0);
    const handleSlideChange = (swiper: SwiperType) => {
        setActiveSlide(swiper.realIndex);
    };

    return (
        <Swiper
            className={`${classes.slider} ${className} `}
            modules={[Navigation]}
            onSlideChange={handleSlideChange}
            navigation={{
                prevEl: `.${classes.prevSlide}`,
                nextEl: `.${classes.nextSlide}`,
            }}
            breakpoints={{
                648: {
                    slidesPerView: 2,
                    spaceBetween: 50,
                },
                991: {
                    slidesPerView: 3,
                    spaceBetween: 20,
                },
                1200: {
                    slidesPerView: 4,
                    spaceBetween: 10,
                },
                1920: {
                    slidesPerView: 5,
                    spaceBetween: 36,
                },
            }}
        >
            {children}
            <SliderNav
                type={'prev'}
                className={`${classes.prevSlide}  ${
                    activeSlide === 0 ? classes.prevSlide_disabled : ''
                }`}
            />
            <SliderNav type={'next'} className={classes.nextSlide} />
        </Swiper>
    );
};

export default CardSlider;

Компонент, где он используется:

import React, { useState } from 'react';
import classes from './News.module.css';
import { SwiperSlide } from 'swiper/react';
import CardSlider from 'entities/ui/CardSlider/CardSlider';
//images
import tradeIn from 'images/news/tradeIn.svg';
import redesign from 'images/news/redesign.svg';
import m1x from 'images/news/m1x.svg';
import fiveG from 'images/news/5g.svg';
import appleTv from 'images/news/appleTv.svg';
import { renderComponent } from 'widgets/helper/renderComponent';
import cardNews from 'entities/ui/Cards/CardNews/CardNews';

interface CardData {
    src: string;
    title: string;
    content: string;
    date?: string;
    href: string;
    className?: string;
}
interface SwiperType {
    realIndex: number;
}

const News: React.FC = () => {
    const [activeSlide, setActiveSlide] = useState(0);
    const handleSlideChange = (swiper: SwiperType) => {
        setActiveSlide(swiper.realIndex);
    };
    const [state] = useState<CardData[]>([
        {
            href: '#',
            src: tradeIn,
            title: 'Додаткова вигода при покупці iPhone 12 та iPhone 12 mini',
            content:
                'При сдаче любого устройства в ' +
                'трейд-ин получите дополнительную ' +
                'выгоду от 7 000 на покупку iPhone 12 и ' +
                'iPhone 12 mini.',
            date: '14 червня 2021',
        },
        {
            href: '#',
            src: redesign,
            title: 'Змінюємо ваш iPhone 12 - з редизайном інтерфейсу Material You',
            content:
                'З 6 квітня до 26 червня включно при здачі будь-якого пристрою в трейд-ін отримаєте додаткову вигоду.',
            date: '14 червня 2021',
        },
    ]);
    return (
        <div className={classes.wrapper}>
            <CardSlider className={classes.news}>
                {renderComponent({
                    data: state,
                    wrapper: SwiperSlide,
                    component: cardNews,
                    className: classes.active,
                    activeSlide: activeSlide,
                })}
            </CardSlider>
        </div>
    );
};

export default News;

map-функция отрисовки из массива:

import React from 'react';
import uuid from 'react-uuid';

interface setComponent {
    data: any[];
    component: React.ComponentType<any>;
    wrapper?: React.ComponentType<any>;
    className?: string;
    activeSlide?: number;
}

export const renderComponent = ({
    data,
    wrapper: Wrapper,
    component: Component,
    className,
    activeSlide,
}: setComponent) => {
    if (Wrapper) {
        return data.map((item, index) => (
            <Wrapper key={uuid()}>
                <Component className={index === activeSlide ? className : ''} {...item} />
            </Wrapper>
        ));
    } else {
        return data.map((item) => (
            <Component className={className} key={uuid()} {...item} />
        ));
    }
};

Компонент, который должен получить класс:

import React from 'react';
import classes from './CardNews.module.css';
interface propsType {
    className?: string;
    src: string;
    alt: string;
    title: string;
    content: string;
    date: string;
    href: string;
}
const CardNews: React.FC<propsType> = (props) => {
    return (
        <a href={props.href} className={`${classes.card}  ${props.className}`}>
            <img src={props.src} alt={props.alt} />
            <div className={classes.content}>
                <h4 className="typography--base">{props.title}</h4>
                <p className="typography--small">{props.content}</p>
                <span className="typography--small">{props.date}</span>
            </div>
        </a>
    );
};

export default CardNews;