Hi, I'm trying to create an image carousel from the shading carousel component, but when I added two images, only one image showed.

import Image from 'next/image';
import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
} from './ui/carousel';

export default function Hero() {
  const images = ['/car-1.jpg', '/car-2.jpg'];

  return (
    <div className='px-20'>
      <Carousel>
        <CarouselContent>
          {images.map((image, index) => (
            <CarouselItem key={index}>
              <div className='w-full h-svh'>
                <Image
                  src={image}
                  alt={`hero-${index}`}
                  fill={true}
                  style={{
                    objectFit: 'cover',
                  }}
                />
              </div>
            </CarouselItem>
          ))}
        </CarouselContent>
        <CarouselPrevious />
        <CarouselNext />
      </Carousel>
    </div>
  );
}

The second image is just a blank image,

When I add the same image twice

  const images = ['/car-1.jpg', '/car-1.jpg'];

Also, it only shows the first image and the second one is empty. Is there a specific way to import images to the carousel? Thank you