how can i load the imageIndex Image first, and then the rest?

<CarouselContent>
  {images.map((image, index) => (
    <CarouselItem
      className="flex items-center justify-center pl-0"
      key={image.id}
    >
 {/* load imageIndex first, then in the background all the others */}
      <Image
        priority={imageIndex === index}
        src={image.src}
        alt={`Profile image of ${name}`}
        width={image.width}
        height={image.height}
        className="md:max-w-3xl lg:max-w-4xl xl:max-w-5xl"
        quality={100}
      />
    </CarouselItem>
  ))}
</CarouselContent>