Objects are not valid as a React child in react-stacked-center-carousel

Question

I am using react-stacked-center-carousel and the code is defined in

The sandbox i am using as refrence

The sandbox i am truing to do it my self now when i pass an array of objects

const data = [
  {
    image: "https://picsum.photos/200/300/?random=1",
    text: "hello"
  },
  {
    image: "https://picsum.photos/200/300/?random=12",
    text: "lel"
  },
];

to

<StackedCarousel
                ref={carouselRef}
                slideComponent={Slide}
                slideWidth={450}
                carouselWidth={width}
                data={data}
                maxVisibleSlide={5}
                disableSwipe
                customScales={[1, 0.85, 0.7, 0.55]}
                transitionTime={450}
              />

this gives an error

Objects are not valid as a React child. If you meant to render a collection of children, use an array instead.

As i am defining data as an array

I am started for this so kindly help me out

The Slide.js file is as follows:

import React from "react";
import {
 StackedCarouselSlideProps
} from "react-stacked-center-carousel";
import "./Slide.css";

export const Slide = React.memo(function(StackedCarouselSlideProps) {
 const {
   data,
   dataIndex,
   isCenterSlide,
   swipeTo,
   slideIndex
 } = StackedCarouselSlideProps;

 const coverImage = data[dataIndex].image;
 const text = data[dataIndex].text;

 console.log(coverImage);
 return ( <
   div className = "card-card"
   draggable = {
     false
   } >
   <
   div className = {
     `cover fill ${isCenterSlide ? "off" : "on"}`
   } >
   <
   div className = "card-overlay fill"
   onClick = {
     () => {
       if (!isCenterSlide) swipeTo(slideIndex);
     }
   }
   /> <
   /div> <
   div className = "detail fill" >
   <
   div className = "discription" >
   <
   img style = {
     {
       width: 100
     }
   }
   alt = "j"
   className = "cover-image"
   src = {
     coverImage
   }
   /> <
   p > {
     text
   } < /p> <
   /div> <
   /div> <
   /div>
 );
});

Answer 1

The problem was that I exported slide component using named export, but imported it as a default import.

Changed my slide component import from

import Slide from "../components/Slide"; 

to

import {Slide} from "../components/Slide"; 

and it works as expected. The carousel itself has no issue.