Unable to resolve image URL from source...

[sjcrippa]

Hi, when I want to use the urlFor(image).url() function, into the image prop, in the AddToBag component, I'm having the following error:

Unhandled Runtime Error Error: Unable to resolve image URL from source ([{"_type":"image","_key":"2df5c6d2ad5f","asset":{"_ref":"image-0d5ec6fed1e3db3dfe4ac1a14a886fc70e7537b0-800x1065-webp","_type":"reference"}},{"_type":"image","_key":"728563eeb445","asset":{"_ref":"image-4e7bd4bf0e00a5210667fedddcf61672a4e964c1-800x1065-webp","_type":"reference"}},{"_type":"image","_key":"fa629b138da8","asset":{"_ref":"image-309c23d4b559cb78a244504b3d6a1f48d9e01701-800x1065-webp","_type":"reference"}}])

The error goes away when I specify that urlFor(image).url() accepts an array, but the item image in the cartModal, doesn't render.

The component looks like this:

'use client'

import { useShoppingCart } from 'use-shopping-cart'

import { Button } from './ui/button'
import { urlFor } from '@/app/lib/sanity'

export interface CartItems {
  name: string,
  description: string,
  price: number,
  currency: string,
  image: any[],
}

export default function AddToCartClient({ name, description, price, currency, image }: CartItems) {
  const { addItem, handleCartClick } = useShoppingCart()

  const item = {
    name,
    description,
    price,
    image: urlFor(image[0]).url(),
    currency,
    sku: 'asd'
  }

  return (
    <Button onClick={() => {
      addItem(item),
        handleCartClick()
    }}>Add to cart</Button>
  )
}

Can someone help me? Thanks!