How to make images work in Gatsby with map function

Question

I am trying to render an artist image, name, city, and current team. I have tried numerous ways to make this work, but for some reason I just can't seem to get it. They query I used was tested in GraphiQL browser. I would greatly appreciate some insight into Gatsby's use of images. I have read the docs numerous times, and each time I feel I get closer, but I am still stuck. So, any help anyone is willing to give would be greatly appreciated. This is the component I am trying to render the images in:

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

This is my config file:

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'),
      },
    },
  ],
}

And my actual artist page component:

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

And all the images I am trying to use are located in: images/artists/headshots/

Thank you in advance for any help, I have gone in numerous circles and can't seem to get anywhere productive.