Gatsby image with staticQuery

Question

I am trying for the first time GatsbyJs and I see the feature with ImageSharp for optimizing images.

Now, I created a component and it works fine, but I would like to optimize the code to be able to add more images.

The code is organized in this manner: I have the component images.js, import this component in the index page. In the component at this moment have 2 images (1.jpg, 2.jpg)

I would like to create two returns of a single component image, see my code of images.js component below:

import React from "react"
import { useStaticQuery, graphql } from "gatsby"
import Image from "gatsby-image"

const ImagesHome = () => {
  const data = useStaticQuery(graphql`
    query BioQuery {
      imgOne: file(absolutePath: { regex: "/1.jpg/" }) {
        childImageSharp {
          fixed(width: 710) {
            ...GatsbyImageSharpFixed
          }
        }
      }
      imgTwo: file(absolutePath: { regex: "/2.jpg/" }) {
        childImageSharp {
          fixed(width: 710) {
            ...GatsbyImageSharpFixed
          }
        }
      }
    }
  `)



  return (
    <div>
      <Image
      fixed={data.imgOne.childImageSharp.fixed}
      />


    <div id="secondImageHome">
      <Image

        fixed={data.imgTwo.childImageSharp.fixed}
      />
    </div>

    </div>
  )
}

export default ImagesHome

I would use the export component image in single code like:

<Img fluid={props.data.imageOne.childImageSharp.fluid} />
<Img fluid={props.data.imageTwo.childImageSharp.fluid} />

Will it be possible with my code? I tried some tutorials on YouTube, but it did not work.