Image will not display using gatsby-image-plugin with no syntax errors, where am I going wrong?

I'm trying to get a background image to display on my hero page. I'm using gatsby-image-plugin. I've troubleshooted all errors but the image still doesn't display on the page. I really just need to see the image on there and I can play around with it. I've attached my Hero.js.

const Hero = () => {
const data = useStaticQuery(graphql`
query SpaceApeQuery {
    allSpaceApeJson {
        edges {
          node {
            img {
              childImageSharp {
                gatsbyImageData(aspectRatio:1, placeholder: BLURRED, layout: FULL_WIDTH
                    
                    )
                }
            }
          
        }
      }
    }
    
}

`)

function getSpaceApe(data) {
const apeSpaceArray = []
data.allSpaceApeJson.edges.forEach((item,index) => {
    apeSpaceArray.push(
        <ProductCard key={index}>
            <ApeGatsbyImage image={item.node.img.childImageSharp.gatsbyImageData} 
                alt={item.node.alt}
            />
        </ProductCard>
    )
})

return apeSpaceArray 

}

return (
    <HeroContainer>
        <HeroBg> {getSpaceApe(data)} </HeroBg> 
        <LightEffect />
        <HeroContent>
            <HeroItems>
                <HeroH1>Yearn-ed Liquidity Pools for Apes.</HeroH1>
                <HeroP>When your LP's aren't being used, they aren't earning...
                That's why we Ape them into Yearn Finance until they're needed for swaps!</HeroP>
                <Button big="true" round="true" href="https://yapeswap-interface.vercel.app"
                        target="_blank">
                    Enter App
                </Button>
            </HeroItems>
        </HeroContent>
    </HeroContainer>
)

}

export default Hero