Not able to render images in Gatsby from .yml file

Question

I am stuck with an issue where I am not able to load image paths which are mentioned in .yml file.

data.yml

- type: sponsor
  company: dummy
  image: ../images/sponsors/sponsor.png

The image path is relative to the yml file.

sponsor.js

 return (
    <div className="body-wrap">
      <div sx={{ maxWidth: "1000px", margin: "auto" }}>
        <Container>
          <div sx={{ display: "flex", justifyContent: "center" }}>
            <SectionHeading mt={100}>Sponsors</SectionHeading>
          </div>
          
            {SponsorData.map((sponsor) => (
              <StaticImage src={sponsor.image} />
            ))}
        </Container>
      </div>
    </div>
  );

gatsby-config.js

plugins: [
    "gatsby-plugin-theme-ui",
    "gatsby-plugin-sass",
    "gatsby-plugin-image",
    `gatsby-transformer-yaml`,
    {
      resolve: "gatsby-source-filesystem",
      options: {
        name: "data",
        path: `${__dirname}/src/data/`,
      },
      __key: "data",
    },
    "gatsby-plugin-sharp",
    "gatsby-transformer-sharp",
    {
      resolve: "gatsby-source-filesystem",
      options: {
        name: "images",
        path: `${__dirname}/src/images/`,
      },
      __key: "images",
    },
    "gatsby-plugin-mdx",
    {
      resolve: "gatsby-source-filesystem",
      options: {
        name: "pages",
        path: `${__dirname}/src/pages/`,
      },
      __key: "pages",
    },
    {
      resolve: "gatsby-source-filesystem",
      options: {
        name: "misc",
        path: "./src/misc/",
      },
      __key: "misc",
    },
    {
      resolve: "gatsby-source-filesystem",
      options: {
        name: "assets",
        path: `${__dirname}/src/assets/`,
      },
      __key: "assets",
    },
  ],