Adding Image Caption and Attribution to API.js

{
    name: 'mainImage',
    title: 'Main image',
    description: 'Image for displaying on the POST PAGE',
    type: 'image',
    options: {
        hotspot: true
    },
    fields: [
        {
            name: 'caption',
            type: 'string',
            title: 'Caption',
            options: {
                isHighlighted: true            }
        },
        {
            name: 'attribution',
            type: 'string',
            title: 'Attribution',
        }
    ]
},

const postFields = `
  _id,
  name,
  title,
  excerpt,
  displayTitle,
  displayExcerpt,
  caption,
  attribution,
  'date': publishedAt,
  'slug': slug.current,
  'coverImage': mainImage, 
  'author': author->{name, 'picture': image.asset->url},
`;

import cn from 'classnames';
import Link from 'next/link';
import { imageBuilder } from '../../lib/sanity';
import styles from './cover-image.module.scss';

export default function CoverImage({ title, caption, url, imageObject, slug }) {
  const image = (
    <img
      width={1020}
      height={654}
      alt={`Cover Image for ${title}`}
      className={cn('drop-shadow-sm', {
        'hover:drop-shadow-sm transition-shadow duration-200': slug,
      })}
      src={imageBuilder(imageObject).width(980).height(654).url()}
    />
  );

  return (
    <figure className='article-teaser default grid-col-12 skin-default'>
      {slug ? (
        <Link as={`/posts/${slug}`} href='/posts/[slug]'>
          <a aria-label={title}>{image}</a>
        </Link>
      ) : (
        image
      )}
      <figcaption className={styles.image_figcaption}>
        <div className={styles.caption_container}>
          <a>{caption}</a>
        </div>
      </figcaption>
    </figure>
  );
}

mainImage {
  caption, 
  attritbution
}

const postFields = `
  _id,
  name,
  title,
  excerpt,
  displayTitle,
  displayExcerpt,
  'date': publishedAt,
  'slug': slug.current,
  'coverImage': mainImage, 
  mainImage {
  caption, 
  attribution
}
  'author': author->{name, 'picture': image.asset->url},
`;

const postFields = `
  _id,
  name,
  title,
  excerpt,
  displayTitle,
  displayExcerpt,
  'date': publishedAt,
  'slug': slug.current,
  'coverImage': mainImage, 
  mainImage {
  caption, 
  attribution
}
  'author': author->{name, 'picture': image.asset->url},
`;