Gatsby GraphyQL devuelve una imagen incorrecta.

Estoy tratando de obtener la imagen que está definida en mi post de markdown y cuando uso GraphQLi, la consulta funciona, pero en mi código JS devuelve la imagen incorrecta.

import React, { ReactElement } from 'react';
import { useStaticQuery, graphql } from 'gatsby';
import { GatsbyImage } from 'gatsby-plugin-image';

export const Img = (props: { alt: string; src: string }): ReactElement => {
  const { alt, src } = props;

const imageName = src.split('/').slice(-1)[0];

const data = useStaticQuery(graphql<code>
    query GetImage($imageName: String) {
      file(relativePath: { eq: $imageName }) {
        childImageSharp {
          gatsbyImageData
        }
      }
    }
</code>);

console.log(imageName, data.file.childImageSharp.gatsbyImageData);

return <GatsbyImage alt={alt} image={data.file.childImageSharp.gatsbyImageData} />;
};

<p>Los resultados del registro en la consola</p>

<p><a href="https://i.stack.imgur.com/NfaR6.png"><img src="https://i.stack.imgur.com/NfaR6.png" alt="Resultados del registro en la consola"></a></p>

<p>Esperaría la imagen de office1, pero me está devolviendo la imagen de docker.</p>

<p>ACTUALIZACIÓN 1:</p>

<p>Estoy probando con StaticImage ya que parece que la consulta no acepta variables. Tengo el siguiente código que aún no muestra la imagen del todo, ni siquiera el texto alternativo.</p>

<p>“`tsx
import React, { ReactElement } from ‘react’;
import { StaticImage } from ‘gatsby-plugin-image’;

export const Img = (props: { alt: string; src: string }): ReactElement => {
const { alt, src } = props,
imageUrl = ../../images/${src};

console.log(imageUrl);
console.log(‘—-‘);

return ;
};
“`

Los registros del URL de la imagen son ../../images/office1.jpg. Si hago lo siguiente, la imagen se muestra correctamente:

tsx
return <StaticImage alt={alt} src='../../images/office1.jpg' />;