FancyBox display only the product media images

Question

I am using FancyBox, and I am mapping a component TradeRow which will render some Images that I want to click, so the FancyBox will show the according media images of that clicked product image.

 {products.map((product) => (
          <TradeRow
            key={product.id}
            addTradePriceForWholesale={addTradePriceForWholesale}
            storefrontProduct={product}
            handleSelectProduct={handleSelectProduct}
          />
        ))}

In TradeRow component:

 <div className="relative h-18 w-18 flex-shrink-0">
          {firstVariant.image && (
            <>
              <Fancybox
                options={{
                  Carousel: {
                    infinite: false,
                  },
                }}
              >
                <a data-fancybox="gallery" href={firstVariant.image.url}>
                  <Image
                    alt={storefrontProduct.title}
                    className="absolute h-full w-full transform bg-cover bg-center object-cover object-center ease-in-out"
                    data={firstVariant.image}
                    loaderOptions={{crop: 'center'}}
                    widths={[150]}
                    onClick={() => handleImageClick()}
                  />
                </a>
                <div className="hidden"></div>
              </Fancybox>
            </>
          )}
        </div>

When I click on an image it shows all the products medias images in the FancyBox, instead I want to only show the related clicked product's media. Please note that when I console log the storefrontProduct in my TradeRow component it shows an array with 24 elements: (24) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]