Help with generating a slug based on attributes in a Next.js FrontEnd using Sanity.io

export default defineType({
  name: 'product',
  title: 'Products',
  type: 'document',
  icon: IconPackage,
  description: 'A product that is available for rent',
  fields: [
    defineField({
      name: 'name',
      title: 'Name',
      type: 'string',
      description: 'The name of the product',
      validation: (Rule) => Rule.required()
    }),
    defineField({
      name: 'description',
      title: 'Description',
      type: 'string',
      description: 'The description of the product'
    }),
    defineField({
      name: 'sku',
      title: 'SKU',
      type: 'string',
      description: 'The SKU of the product'
    }),
    defineField({
      name: 'category',
      title: 'Category',
      type: 'reference',
      to: [{ type: 'category' }],
      description: 'The category of the product',
      validation: (Rule) => Rule.required()
    }),
    defineField({
      name: 'properties',
      title: 'Properties',
      type: 'object',
      description: 'The properties of the product',
      fields: [
        {
          name: 'color',
          type: 'reference',
          description: 'The color of the product',
          to: [{ type: 'color' }]
        },
        {
          name: 'material',
          type: 'reference',
          description: 'The material of the product',
          to: [{ type: 'material' }]
        },
        {
          name: 'style',
          type: 'reference',
          description: 'The style of the product',
          to: [{ type: 'style' }]
        },
        {
          name: 'size',
          description: 'The size of the product',
          type: 'string'
        }
      ]
    }),
   .....
    defineField({
      name: 'slug',
      title: 'Slug',
      type: 'slug',
      description: 'The slug for the product',
      options: {
        source: 'name'
      },
      validation: (Rule) => Rule.required()
    })
  ],
})

async function SlugWithNameColorMaterialStyle(input, schemaType, context) {
  const { getClient, parent } = context
  const { name, color, material, style } = parent
  const client = getClient({
    apiVersion: process.env.NEXT_PUBLIC_SANITY_API_VERSION
  })
  const colorName = await client.fetch(`*[_id == $id][0].name`, {
    id: color._ref
  })
  const materialName = await client.fetch(`*[_id == $id][0].name`, {
    id: material._ref
  })
  const styleName = await client.fetch(`*[_id == $id][0].name`, {
    id: style._ref
  })
  return slugify(
    `${name && name}-${colorName && colorName}-${
      materialName && materialName
    }-${styleName && styleName}`,
    {
      lower: true
    }
  )
} 

const [colorName, materialName, styleName] = await Promise.all([
    client.fetch(`*[_id == $id][0].name`, {
      id: color._ref
    }),
    client.fetch(`*[_id == $id][0].name`, {
      id: material._ref
    }),
    client.fetch(`*[_id == $id][0].name`, {
      id: style._ref
    })
  ])