Gatsby displaying invisible images, data exists in dynamic images

Question

Gatsby newb here, but I do have a lot of react experience. So my data is coming back with the following query:

export const query = graphql`
  query sponsorsPage {
    allFile {       
      nodes {        
        relativePath         
        childImageSharp {         
          gatsbyImageData(width: 400)
        }
      }
    }
  }`

The javascript I am calling in my return statement:

const sponsors = 
  data.allFile.nodes.filter((item)=>item.relativePath.includes('sponsors'))
const callImages = () =>{
  sponsors.forEach((item)=>{
    console.log(item)
    const image = getImage(item)
    const gid = item.childImageSharp.gatsbyImageData
    return <GatsbyImage image={gid} alt="" />
    //return <GatsbyImage image={image} alt=""/>
  })
}

Unfortunately, when this is placed in my dom, it is displaying all empty on the page, no images.

return (<>
  <LayoutNoFooter>
    <div>
      {callImages()}
    </div>

  </LayoutNoFooter>
</>)

I have a commented out code for the other GatsbyImage I tried that was with the getImage, but that does not work either. My console log is returning all of the images, so I know it works, but I would like to be able to randomly select some of these images, and I would also like to be able to place them all on the screen at once. The former was for every page in the website to show random sponsors, and then on the actual sponsor page I wanted to display all of the images. But right now, like I stated, it is a blank page. Please let me know if you see some code that might be changed to fix? Thanks in advance.