Ошибка при сопоставлении схемы здравомыслия в моем веб-сайте реагирования

Я пытаюсь сопоставить схему здравомыслия, но я не могу этого сделать, пожалуйста, помогите мне, если кто-нибудь знает:

Это категория .js схемы здравомыслия, которую я хочу пройти, здесь я хочу пройти массив функций типа изображения, который содержит массив изображений.

export default{
    name: 'categories',
    title: 'Categories',
    type: 'document',
    fields: [
        {
            name: 'category',
            title: 'Category (eg Clothing)',
            type: 'string',
        },
        {
            name:'features',
            title: 'Features',
            type: 'array',
            of: [
              {
                name:'featureimg',
                title: 'Feature Image',
                type:'image',
                options: {
                  hotspot: true,
                },
              },
            ]
          },
    ]
}

Это реагирующий компонент product.js, в котором я просматриваю массив, но не могу этого сделать.

import React, { useState, useEffect } from "react";
import { urlFor, client } from "../../client";

const Product = () => {
  const [categories, setCategories] = useState([]);

  useEffect(() => {
    const query1 = '*[_type == "categories"] | order(title asc)';

    client.fetch(query1).then((data) => {
      setCategories(data);
      // console.info(categories[1].features.length);
      // console.info(urlFor(categories[1].features[1].featureimg));
    });
  }, []);

  return (
    <div>
      <div className = "app__work-filter">
        {categories.map((item, index) => (
          <div key = {index}>
            <div>
              {item.category}
              <div> **Main part where error is happening**
                {item.features.map((feature, index) => (
                  <img
                    src = {urlFor(feature.featureimg)}
                    alt = " "
                    loading = "lazy"
                  />
                ))}
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

export default Product;

Это client.js, который используется для извлечения контента из здравомыслия.

import { createClient } from '@sanity/client';
import imageUrlBuilder from '@sanity/image-url';

export const client = createClient({
  projectId: process.env.REACT_APP_SANITY_PROJECT_ID,
  dataset: 'production',
  apiVersion: '2023-04-01',
  useCdn: true,
  token: process.env.REACT_APP_SANITY_TOKEN,
});

const builder = imageUrlBuilder(client);

export const urlFor = (source) => builder.image(source);

Это ошибка, которую я получаю

Waning: The provided `src` attribute is an unsupported type ImageUrlBuilder. This value must be coerced to a string before before using it here.
 
Uncaught Error: Unable to resolve image URL from source (undefined)
    at urlForImage (urlForImage.ts:43:1)
    at ImageUrlBuilder.url (builder.ts:252:1)
    at ImageUrlBuilder.toString (builder.ts:257:1)
    at testStringCoercion (react-dom.development.js:259:

Я уже пробовал вариант .url(), но это не сработало.

// console.info(categories[1].features.length);
// console.info(urlFor(categories[1].features[1].featureimg));

Оба журнала консоли работают нормально

Я пробовал и тестировал все, но я не могу получить то, чего мне не хватает, я использовал ту же логику сопоставления во многих местах, используя один и тот же файл client.js в том же приложении для реагирования. Но здесь, когда я сопоставляю внутри сопоставления, я получаю эту ошибку. ПОМОГИТЕ ЕСЛИ КТО ЗНАЕТ

🤔 А знаете ли вы, что...
React поддерживает создание контекста для передачи данных между компонентами.