Using the gatsby image plugin, my image is not showing up on my website

I am trying to use the gatsby-image-plugin in order to optimise images on my website but for some reason the image is now not showing up (The image shows up on the website without the plugin).

I am retrieving my image from contentful using graphQL and I am sure that my graphql query is correct as I was using the same one before using the plugin too.

I have tried adding console logs and it does indeed seem to be retrieving the image:

code for console log

console log on chrome

Can anyone help please:

import React from 'react'
import { graphql, useStaticQuery } from "gatsby"
import { GatsbyImage, getImage } from "gatsby-plugin-image"

import "../scss/HeroImage.scss"

export default function HeroImage() {
    const data = useStaticQuery(graphql
        query MyQuery {
            allContentfulHeroImage(filter: { name: { eq: "Home Page Hero" } }) {
                edges {
                    node {
                        heroImage {
                            altText
                            image {
                                file {
                                    url
                                }
                                id
                            }
                            name
                        }
                    }
                }
            }
        }
    )

    const image = getImage(data.allContentfulHeroImage.edges[0].node.heroImage)

    return (
        <div className="heroImageContainer">
            {image && (
                <GatsbyImage image={image} alt={data.allContentfulHeroImage.edges[0].node.heroImage.altText} />
            )}
        </div>
    )
}

I checked inspect and my image is container is there but not the image asset from contentful.

I double checked by creating a new contentful entry and trying to retrieve that image.

I am not having any error messages.