Изображение миниатюры gatsby-source-medium не отображается

Я использую gatsby в своем проекте реакции, чтобы показать мою среду, статьи внутри проекта.

ниже мой запрос graphql для этого.

const BlogPost = () => {
  const blogMediumQueryData = useStaticQuery(graphql`
    query Medium {
      allMediumPost(sort: { fields: [createdAt], order: DESC }) {
        edges {
          node {
            id
            title
            uniqueSlug
            createdAt(formatString: "MMM YYYY")
            virtuals {
              previewImage {
                imageId
              }
            }
            author {
              name
            }
          }
        }
      }
    }
  `)

  const blogs = blogMediumQueryData.allMediumPost.edges
return (
    <Blog
        image={blog.node.virtuals.previewImage.imageId}
        title={blog.node.title}
        date={blog.node.createdAt}
        author={blog.node.author.name}
        path={blog.node.uniqueSlug}
     />
  )

это дает мне идентификатор изображения предварительного просмотра. И я передаю его дочернему компоненту как опору. Но когда я пытаюсь показать изображение с помощью компонента Img из gatsby, изображение не отображается.

Вот мой код для дочернего компонента

import React from "react"
import { Link } from "gatsby"
import { slugify } from "../utils/utilityFunctions"
import Image from "../elements/image"

const Blog = ({ image }) => {
  return (
    <div className="content-block">
      <div className="post-thubnail">
        {image && (
          <Link to={postUrl} target='blank'>
            <Image src={image} alt={title} />
          </Link>
        )}
      </div>
  )
}
export default Blog

Вот код для компонента изображения

import React from "react";
import Img from "gatsby-image";

const NonStretchedImage = props => {
    let normalizedProps = props
    normalizedProps = {...normalizedProps.fluid, aspectRatio: 1}
    let alignment;
    if(props.align === 'right'){
        alignment = '0 0 0 auto'
    } else if(props.align === 'left'){
        alignment = '0 auto 0 0'
    }else{
        alignment = '0 auto'
    }

    if (props.fluid && props.fluid.presentationWidth) {
        normalizedProps = {
            ...props,
            style: {
                ...(props.style || {}),
                maxWidth: props.fluid.presentationWidth,
                margin: alignment, 
            },
        }
    }

    return <Img {...normalizedProps} />
}

export default NonStretchedImage;

Это мой первый проект с gatsby и graphql. Что-то я пропустил или что-то делаю не так?

заранее спасибо