Как заставить изображения работать в Gatsby с помощью функции карты

Question

Я пытаюсь визуализировать изображение художника, имя, город и текущую команду. Я пробовал множество способов заставить эту работу работать, но по какой-то причине я просто не могу этого понять. Их запрос, который я использовал, был протестирован в браузере GraphiQL. Я был бы очень признателен за понимание того, как Гэтсби использует изображения. Я читал документы много раз и каждый раз чувствую, что приближаюсь, но все равно застрял. Поэтому мы будем очень благодарны за любую помощь, которую кто-либо захочет оказать. Это компонент, в котором я пытаюсь визуализировать изображения:

      import React from 'react'
import PropTypes from 'prop-types'
import { StaticImage } from 'gatsby-plugin-image'
import { useStaticQuery, graphql } from 'gatsby'
import { GatsbyImage, getImage } from 'gatsby-plugin-image'

import { useStyles } from './styles'

const ArtistsPage = ({ data }) => {
  const classes = useStyles()
  const imageData = useStaticQuery(graphql`
    query {
      allFile(filter: { extension: { eq: "jpg" } }) {
        edges {
          node {
            childImageSharp {
              fluid {
                originalName
              }
              gatsbyImageData
              id
            }
          }
        }
      }
    }
  `)

  return (
    <section>
      <article className={classes.artistsBackground}>
        <div className={classes.heroLayoutContainer}>
          <h3 className={classes.title}>MEET THE ARTISTS</h3>

          <StaticImage
            className={classes.heroImage}
            src='../../images/artists/hero-images/hero-image-artists.jpg'
            alt='hero-image-artists'
            placeholder='blurred'
          />
        </div>
      </article>

      <article className={classes.artistsContainer}>
        <div className={classes.flexContainer}>
          {data.allArtistsJson.edges
            .map(({ node }, idx) => {
              return (
                <div className={classes.flexItem} key={idx}>
                  <div>
                    {imageData.allFile.edges.map((id) => {
                      const image = getImage(imageData)
                      return (
                        <GatsbyImage
                          image={image}
                          key={id}
                          alt='artist-image'
                        />
                      )
                    })}
                  </div>
                  <div className={classes.artistCardName}>
                    {`${node.firstName} ${node.lastName}`.toUpperCase()}
                  </div>
                  <div className={classes.artistCardText}>{node.city}</div>
                  <div className={classes.artistCardText}>
                    {node.currentTeam}
                  </div>
                </div>
              )
            })}
        </div>
      </article>
    </section>
  )
}

ArtistsPage.propTypes = {
  firstName: PropTypes.string,
  lastName: PropTypes.string,
  currentTeam: PropTypes.string,
  headshots: PropTypes.string,
  dropdown: PropTypes.string,
  data: PropTypes.array,
}

export default ArtistsPage

Это мой файл конфигурации:

      const path = require('path')

module.exports = {
  siteMetadata: {
    title: 'Platform Showcase',
  },
  plugins: [
    'gatsby-plugin-gatsby-cloud',
    // {
    //   resolve: "gatsby-plugin-google-analytics",
    //   options: {
    //     trackingId: "",
    //   },
    // },
    'gatsby-plugin-react-helmet',
    'gatsby-plugin-sitemap',
    {
      resolve: 'gatsby-plugin-manifest',
      options: {
        icon: 'src/images/icon.png',
      },
    },
    'gatsby-plugin-mdx',
    'gatsby-plugin-image',
    'gatsby-plugin-sharp',
    'gatsby-transformer-sharp',
    {
      resolve: 'gatsby-source-filesystem',
      options: {
        name: 'images',
        path: './src/images/',
      },
      __key: 'images',
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `headshots`,
        path: `${__dirname}/src/images/artists/headshots`,
      },
      __key: 'headshots',
    },
    {
      resolve: 'gatsby-source-filesystem',
      options: {
        name: 'pages',
        path: './src/pages/',
      },
      __key: 'pages',
    },
    `gatsby-theme-material-ui`,
    `gatsby-transformer-json`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `./src/data/`,
      },
    },
    {
      resolve: 'gatsby-plugin-root-import',
      options: {
        src: path.join(__dirname, 'src'),
        components: path.join(__dirname, 'src/components'),
        containers: path.join(__dirname, 'src/containers'),
        helpers: path.join(__dirname, 'src/helpers'),
        images: path.join(__dirname, 'src/images'),
      },
    },
  ],
}

И мой фактический компонент страницы художника:

      import React from 'react'
import { graphql } from 'gatsby'
import PropTypes from 'prop-types'

import ArtistsContainer from 'containers/ArtistsContainer'

const Artists = ({ data }) => {
  return <ArtistsContainer data={data} />
}
export const query = graphql`
  query {
    allArtistsJson {
      edges {
        node {
          firstName
          lastName
          currentTeam
          city
        }
      }
      totalCount
    }
  }
`

Artists.propTypes = {
  data: PropTypes.array,
}
export default Artists

И все изображения, которые я пытаюсь использовать, находятся в: images / artist / headshots /

Заранее благодарю вас за любую помощь, я ходил по многочисленным кругам и, кажется, не могу найти ничего продуктивного.