Issue with displaying the author's photo in a blog article

const blogMain = {
    name: 'post',
    title: 'Post',
    type: 'document',
    fields: [
      {
        name: 'title',
        title: 'Title',
        type: 'string',
      },
      {
        name: 'slug',
        title: 'Slug',
        type: 'slug',
        options: {
          source: 'title',
          maxLength: 96,
        },
      },
      {
        name: 'content',
        title: 'Content',
        type: 'array',
        of: [{ type: 'block' }],
      },
      {
        name: 'excerpt',
        title: 'Excerpt',
        type: 'string',
      },
      {
        name: 'coverImage',
        title: 'Cover Image',
        type: 'image',
        options: {
          hotspot: true,
        },
        fields: [
            {
                name: "alt",
                title: "Alt",
                type: "string",
            },
        ],
      },
      {
        name: 'date',
        title: 'Date',
        type: 'datetime',
      },
      {
        name: 'author',
        title: 'Author',
        type: 'reference',
        to: { type: 'author' },
      },
    ],
    preview: {
      select: {
        title: 'title',
        author: 'author.name',
        media: 'coverImage',
      },
      prepare(selection: { author: any }) {
        const { author } = selection
        return { ...selection, subtitle: author && `by ${author}` }
      },
    },
  }

  export default blogMain

export async function getPosts(): Promise<Post[]> {
    return createClient(clientConfig).fetch(
        groq`*[_type == "post"]{
            _id,
            _createdAt,
            title,
            "slug": slug.current,
            alt,
            excerpt,
            "coverImage": coverImage.asset->url,
            date,
            "author": author->{name, picture},
        }`
    );
}

const BlogPosts = async () => {
    const posts = await getPosts();
    const displayPosts = posts.map((post) => {
        return (
            <div className="max-w-sm rounded overflow-hidden shadow-lg">
                <Link
                    href={`/posts/${post.slug}`}
                    key={post._id}
                >
                    {post.coverImage && (
                        <Image
                            src={post.coverImage}
                            alt={post.title}
                            width={750}
                            height={300}
                            className="object-cover rounded-lg border border-gray-500"
                        />
                    )}
                    <div className="px-6 py-4">
                        <div className="font-bold text-xl mb-2">
                            {post.title}
                        </div>
                        <Image
                            src={post.author.picture}
                            alt="something"
                            width={50}
                            height={50}
                            className="object-cover rounded-lg border border-gray-500"
                        />
                        <div className="font-bold text-sm mb-2">
                            {post.author.name}
                            {post.date}
                        </div>
                        <p className="text-gray-700 text-base">
                            {post.excerpt}
                        </p>
                    </div>
                </Link>
            </div>
        );
    });

    return <div>{displayPosts}</div>;
}

export default BlogPosts;

<img alt="something" width="50" height="50" decoding="async" data-nimg="1" class="object-cover rounded-lg border border-gray-500" src="" style="">

<https://cdn.sanity.io/images/ta7lvil7/production/10f3521c92769c03c200b311aeecc3814e0b7f66-1280x720.jpg>
Warning: Each child in a list should have a unique "key" prop.

Check the top-level render call using <div>. See <https://reactjs.org/link/warning-keys> for more information.
    at div

AUTHOR IMAGE:  {
  crop: { top: 0, left: 0, bottom: 0, _type: 'sanity.imageCrop', right: 0 },
  hotspot: { x: 0.5, y: 0.5, height: 1, _type: 'sanity.imageHotspot', width: 1 },
  _type: 'image',
  asset: {
    _ref: 'image-efbbe065b6589bd853935500e85084e4566cf5e4-512x512-png',
    _type: 'reference'
  }
}

author->{
  name, 
  picture{
   ...,
   'url': asset->url
  }
}

const builder = imageUrlBuilder(createClient({
        projectId: "abcd1234",
        dataset: "production",
      }));