Implementing Image Carousel in NextJS

import React from "react"; import FeaturedScreen from "./components/FeaturedScreen/FeaturedScreen"; import Header from "./components/Header/Header"; export default function Home() { return ( <main> <Header /> <FeaturedScreen /> </main> ); } 

const ImageDetails = [ { id: 1, movieName: "KAHAANI", language: "Hindi", img: "/IC-1.jpg", }, { id: 2, movieName: "URI", language: "Hindi", img: "/IC-2.jpg", }, { id: 3, movieName: "SPIDERMAN - NO WAY HOME", language: "English", img: "/IC-3.jpg", }, ]; export { ImageDetails }; 

import { Carousel } from "react-responsive-carousel"; import "react-responsive-carousel/lib/styles/carousel.min.css"; // requires a loader import { ImageDetails } from "../../../public/FeaturedContent.js"; // Source for Image and its information export default function FeaturedScreen() { return ( <div> <Carousel autoPlay> {ImageDetails.map((movie) => ( <div key={movie.id}> <img src={movie.img} alt="carouselImage-1" /> </div> ))} </Carousel> </div> ); }