Pass SlideData through a custom component wrapper

[JosuerBague]

Hi there,
So I created a custom wrapper for the SwiperSlide like so:

import * as React from 'react';
import { SwiperSlide } from 'swiper/react';

type Props = {
  tag?: string;
  children: React.ReactNode;
  className?: string;
};

const Slide: React.FC<Props> = ({ children, className, tag = 'li' }) => (
  <SwiperSlide tag={tag} className={className}>
    {children}
  </SwiperSlide>
);

Slide.displayName = 'SwiperSlide';

export { Slide };

I was wondering how I could pass down the isActive, isNext, isPrev props to the children being rendered here.
Currently, I am using it in a carousel and all three props always returns false.

{items.map((it) => {
          return (
            <Slide
              className={styles.slide}
              key={it.authorName}
            >
              {({
               isActive,
               isNext,
               isPrev,
              }: Record<string, boolean>): JSX.Element => {
                return (
                  <ReviewItem
                    item={it}
                    isActive={isActive}
                    side={getSliderSide(isNext, isPrev)}
                  />
                );
              }}
             </Slide>
 }

[JosuerBague]

Hello, I just figured it out.

In case anybody needs it:

import * as React from 'react';
import { SwiperSlide, SwiperSlideProps } from 'swiper/react';

type Props = SwiperSlideProps & {
  tag?: string;
  className?: string;
};

const Slide: React.FC<Props> = ({ children, className, tag = 'li', ...props }) => {
  return (
  <SwiperSlide tag={tag} className={className} {...props}>
    {children}
  </SwiperSlide>
)};

Slide.displayName = 'SwiperSlide';

export { Slide };