Next/image doesn’t load my src image when I use a map

I use next/image to load my images in my app. It works fine except for a carousel with multiple images.
When I do like this I have that error :

Error: Image is missing required “src” property. Make sure you pass “src” in props to the next/image component. Received: {}

The problem is not because I have an entity without any file

image.js

import { getStrapiMedia } from "../utils/medias"
import NextImage from "next/image"

const Image = (props) => {
  if (!props.media) {
    return <NextImage {...props} />
  }

  const { url, alternativeText } = props.media

  const loader = ({ src }) => {
    return getStrapiMedia(src)
  }

  return (
    <NextImage
      loader={loader}
      layout="responsive"
      objectFit="contain"
      width={props.media.width}
      height={props.media.height}
      src={url}
      alt={alternativeText || ""}
    />
  )
}

export default Image

Carousel.js

import React, { useCallback } from "react"
import useEmblaCarousel from "embla-carousel-react"
import NextImage from "./Image"

export const EmblaCarousel = (product) => {
  const [emblaRef, emblaApi] = useEmblaCarousel()

  useEmblaCarousel.globalOptions = { loop: true }

  const scrollPrev = useCallback(() => {
    if (emblaApi) emblaApi.scrollPrev()
  }, [emblaApi])

  const scrollNext = useCallback(() => {
    if (emblaApi) emblaApi.scrollNext()
  }, [emblaApi])

  return (
    <div className="embla" ref={emblaRef}>
      <div className="embla__container">
        {product.gallery.map((_gallery) => (
          <div key={_gallery.id}>
            <NextImage media={_gallery.image} className="embla__slide" />
          </div>
        ))}
      </div>
      <button
        className="hidden md:inline embla__prev mr-2"
        onClick={scrollPrev}
      >
        Prev
      </button>
      <button
        className="hidden md:inline embla__next ml-2"
        onClick={scrollNext}
      >
        Next
      </button>
    </div>
  )
}

export default EmblaCarousel