Рефакторинг Gatsby Image Query

В настоящее время я использую Gatsby и gatsby-image в своем компоненте IndexPage. Я хочу реорганизовать приведенный ниже код в один компонент React, так как нет ненужного дублирования:

          ...
          return (
          <div>
            <h1>Startups</h1>
            <p>Copy</p>
            <Img fluid = {props.data.imageOne.childImageSharp.fluid}/>
          </div>
          <div>
            <h1>People</h1>
            <p>Copy</p>
            <Img fluid = {props.data.imageTwo.childImageSharp.fluid}/>
          </div>
          <div>
            <h1>Data</h1>
            <p>Copy</p>
            <Img fluid = {props.data.imageThree.childImageSharp.fluid}/>
          </div>
        </div>
        )

export const fluidImage = graphql`
fragment fluidImage on File {
  childImageSharp {
    fluid(maxWidth: 1000) {
      ...GatsbyImageSharpFluid
    }
  }
}
`

export const pageQuery = graphql`
  query {
    imageOne: file(relativePath: { eq: "igemA.png" }) {
      ...fluidImage
    }
    imageTwo: file(relativePath: { eq: "inephemeraA.png" }) {
      ...fluidImage
    }
    imageThree: file(relativePath: { eq: "polypA.png" }) {
      ...fluidImage
    }
  }

Это похоже на что-то вроде этого:

const NewComponent = (props) => (
          <div>
            <h1>props.heading</h1>
            <p>props.body</p>
            <Img fluid = {props.data.[props.image].childImageSharp.fluid}/>
          </div>

)

Как я могу изменить запрос graphql, чтобы я мог отображать изображение в зависимости от реквизитов, переданных в NewComponent?