Next.js 14 TypeError: Cannot read properties of undefined (reading 'ariaLabel')

[rezzak-allcode]

I found the issue Also add "use client"

[s4sebin]

use client not working on my component!!! Any idea?

[Qodestackr]

use client not working on my component!!! Any idea?

Mine too. @s4sebin @YIZHUANG any fix?

My code:

"use client";
import { BaggageClaim } from "lucide-react";
import Image from "next/image";
import Link from "next/link";
import React from "react";
import Carousel from "react-multi-carousel";
import "react-multi-carousel/lib/styles.css";
import DoctorCard from "./DoctorCard";
import { Doctor } from "@/types/types";

export default function DoctorsListCarousel({
  doctors,
  isInPerson,
}: {
  doctors: Doctor[];
  isInPerson?: boolean;
}) {
  const responsive = {
    desktop: {
      breakpoint: { max: 3000, min: 1024 },
      items: 3,
      slidesToSlide: 3, // optional, default to 1.
    },
    tablet: {
      breakpoint: { max: 1024, min: 464 },
      items: 3,
      slidesToSlide: 2, // optional, default to 1.
    },
    mobile: {
      breakpoint: { max: 464, min: 0 },
      items: 2,
      slidesToSlide: 1, // optional, default to 1.
    },
  };
  console.log(doctors);
  return (
    <Carousel
      swipeable={false}
      draggable={false}
      showDots={true}
      responsive={responsive}
      ssr={true} // means to render carousel on server-side.
      infinite={true}
      autoPlay={true}
      autoPlaySpeed={5000}
      keyBoardControl={true}
      customTransition="all .5"
      transitionDuration={1000}
      containerClass="carousel-container"
      removeArrowOnDeviceType={["tablet", "mobile"]}
      // deviceType={}
      dotListClass="custom-dot-list-style"
      itemClass="px-4"
    >
      {doctors.map((doctor: Doctor, i: number) => {
        return <DoctorCard doctor={doctor} key={i} isInPerson={isInPerson} />;
      })}
      HOW ABOUT THIS?.
    </Carousel>
  );
}