How can I use gatsby-plugin-image in a map function

[ixam1]

I am just starting with gatsby and having trouble figuring out how to use gatsby-plugin-image in the following case:

const array  = [
    {
        title: "Image 1",
        image: "../images/image1.jpg"
    },
    {
        title: "Image 2",
        image: "../images/image2.jpg"
    },
    {
        title: "Image 3",
        image: "../images/image3.jpg"
    },
    {
        title: "Image 4",
        image: "../images/image4.jpg"
    }
]

export default Section = function(){

    return (
        <div className="bg-white w-full">

                    {array.map((item, index) => (

                        <div key={index} className="flex flex-col items-center lg:items-start">

                               <h2>{item.title}</h2>
                               //How do I use the image plugin here?

                        </div>

                    ))}
        </div>
    )

}

What I tried and doesnt work:

{array.map((item, index) => (

    <div key={index} className="flex flex-col items-center lg:items-start">

           <h2>{item.title}</h2>
           <StaticImage src={item.image}/>

    </div>

))}

I know I am supposed to use GatsbyImage and GraphQl Query for this, but I cant figure out how. What I did now is this workaround:

import image1 from "../images/image1 .jpg"
import image2 from "../images/image2.jpg"
import image3 from "../images/image3.jpg"
import image4 from "../images/image4.jpg"

const array  = [
    {
        title: "Image 1",
        image: image1 
    },
    {
        title: "Image 2",
        image: image2
    },
    {
        title: "Image 3",
        image: image3 
    },
    {
        title: "Image 4",
        image: image4
    }
]

export default Section = function(){

    return (
        <div className="bg-white w-full">

                    {array.map((item, index) => (

                        <div key={index} className="flex flex-col items-center lg:items-start">

                               <h2>{item.title}</h2>
                               <img src={item.image} className="w-50 h-44 object-cover"></img>

                        </div>

                    ))}
        </div>
    )

}

But obviously with this I dont take advantage of gatsby image plugin, and its more tedious.

My Config:

module.exports = {
  plugins: [
    "gatsby-plugin-postcss",
    "gatsby-plugin-image",
    "gatsby-plugin-react-helmet",
    "gatsby-plugin-sharp",
    "gatsby-transformer-sharp",
    {
      resolve: "gatsby-source-filesystem",
      options: {
        name: "images",
        path: `${__dirname}/src/images/`,
      },
      __key: "images",
    },
  ],
};

Any help would be greatly appreciated.

[nimajnebp]

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

const MyComponent = () => {
  const data = useStaticQuery(graphql`
    {
      allFile(filter: {extension: {eq: "jpg"}}) {
        nodes {
          name
          id
          childImageSharp {
            gatsbyImageData(aspectRatio: 3, formats: WEBP)
          }
        }
      }
    }
  `);

  return (
    <div>
      {
        data.allFile.nodes.map((item) => (
          <GatsbyImage key={item.id} alt={item.name} image={item.childImageSharp.gatsbyImageData} />
        ))
      }
    </div>
  );
};

export default MyComponent;

I hope this helps. @ixam1