<Images> Size in item.images error | Next.js | Page 1

Hello everyone. Please tell me, how to insert variables from Sanity into the image string?

import { client, urlFor } from '@/lib/utils'
import { Base } from '@/lib/types'

import Image from 'next/image'
import Link from 'next/link'

async function getData() {
  const query = `*[_type == "base"] | order(_createdAt asc) {
    _id,
    name,
    "slug": slug.current,
    cover {width, height, "image": asset->url},
    price,
    description,
    background
  }`

  const data = await client.fetch(query)

  return data
}

export const dynamic = 'force-dynamic'

export default async function Base() {
  const data: Base[] = await getData()

  return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
      {data.map((item) => (
        <Link
          key={item._id}
          href={`/subscribe/${item.slug}`}>
          <div
            className={`${item.background} p-4 block border rounded-lg h-full`}>
            <Image
              src={urlFor(item.cover.image).url()}
              alt={item.name}
              className={`w-[${item.cover.width}px] h-[${item.cover.height}px]`}
              width={item.cover.width}
              height={300}
            />
            {item.price}
            {item.description}
          </div>
        </Link>
      ))}
    </div>
  )
}

#<Images> Size in item.images error