Next.js 13 react-responsive-carousel not working

I am following a tut creating an ebay clone. One of the steps is creaitng a carousel. When I add it, it does not move on to the next page. I have tried uninstall and reinstalling packages. I am new to next so I am not sure what could be the problem. I also tried to use and remove the "use client" directive.

I looked at the console and it seems like there are no event listeners on the buttons and I am not sure why they woulnt exist. I appreciate the help. Here is my code below:

"use client";

import Image from "next/image";
import { Carousel } from "react-responsive-carousel";
import "react-responsive-carousel/lib/styles/carousel.min.css";

export default function CarouselComp() {
  return (
    <>
      <div className='max-w-[1200px] mx-auto'>
        <Carousel showArrows={true} autoPlay={true} interval={3000} infiniteLoop={true} showThumbs={false}>
            <div>
                <Image src={"/images/banner/1.png"} alt="Banner image" width={1200} height={300}/>
            </div>
            <div>
                <Image src="/images/banner/2.png" alt="Banner image"  width={1200} height={300}/>
            </div>
            <div>
                <Image src="/images/banner/3.png"  alt="Banner image" width={1200} height={300} />
            </div>
        </Carousel>
      </div>
    </>
  );
};

here is package.json

{
  "name": "ebay-clone",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "dev turbo": "next dev --turbo",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "prisma": {
    "seed": "node prisma/seed.js"
  },
  "dependencies": {
    "@prisma/client": "^5.1.1",
    "@radix-ui/react-slot": "^1.0.2",
    "@stripe/stripe-js": "^2.1.0",
    "@supabase/auth-helpers-nextjs": "^0.7.4",
    "@supabase/auth-helpers-react": "^0.4.2",
    "@supabase/auth-ui-react": "^0.4.2",
    "@supabase/auth-ui-shared": "^0.1.6",
    "@supabase/supabase-js": "^2.32.0",
    "@types/node": "20.5.1",
    "@types/react": "18.2.20",
    "@types/react-dom": "18.2.7",
    "autoprefixer": "10.4.15",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.0.0",
    "dayjs": "^1.11.9",
    "debounce": "^1.2.1",
    "eslint": "8.47.0",
    "eslint-config-next": "13.4.19",
    "lucide-react": "^0.268.0",
    "next": "13.4.19",
    "postcss": "8.4.28",
    "prisma": "^5.1.1",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-icons": "^4.10.1",
    "react-responsive-carousel": "^3.2.23",
    "react-toastify": "^9.1.3",
    "stripe": "^13.2.0",
    "tailwind-merge": "^1.14.0",
    "tailwindcss": "3.3.3",
    "tailwindcss-animate": "^1.0.6",
    "typescript": "5.1.6"
  }
}

I deviated from the tutorial a bit and tried to use typescript and next/Image. not sure if those could be causing the problems

Clicking on any buttons does not change the image nor does the autoplay work:

image of the app so far

Upvotes: 2