Warning: Failed prop type: The prop `alt` is marked as required in `MainImage`, but its value is `undefined`. MainImage

In my gatsby project I am getting this warning.

I am using Gatsby v3.

The warning looks like this

Warning: Failed prop type: The prop `alt` is marked as required in `MainImage`, but its value is `undefined`.MainImage

The index.js looks like this.

import { graphql, Link } from "gatsby"

import React from "react"
import Layout from "../components/Layout"
import * as style from "../styles/home.module.css"
import { GatsbyImage } from "gatsby-plugin-image"

export default function Home({ data }) {
  console.log(data)
  return (
    <Layout>
      <section className={style.header}>
        <div>
          <h2>Design</h2>
          <h3>Develop & deploy</h3>
          <p>Become web ninja</p>
          <Link to="/projects" className={style.btn}>
            My Portfolio Projects
          </Link>
        </div>
        <GatsbyImage image={data.file.childImageSharp.gatsbyImageData} />
      </section>
    </Layout>
  )
}

export const query = graphql`
  query Banner {
    file(relativePath: { eq: "banner.png" }) {
      childImageSharp {
        gatsbyImageData(layout: FIXED)
      }
    }
  }
`

Please let me know why I am getting this warning ?

Also how can I use fluid image in gatsby v3 ?

alt prop in the new <GatsbyImage> component, from the v3 of Gatsby, is required for accessibility improvements, so if you don't have it, just leave it empty but you need to provide it:

<GatsbyImage image={data.file.childImageSharp.gatsbyImageData} alt={``} />

Also how can I use fluid image in gatsby v3 ?

As you can see in the migration guide and in the docs, the fluid attribute has been renamed to FULL_WIDTH as a layout property, so to use it, the query should look like something like:

childImageSharp {
  gatsbyImageData(layout: FULL_WIDTH)
}