query and inject multiple fluid gatsby images in page

Fluid Gatsby Image PageQuery Multiple

/** @jsx jsx */
import React from "react"
import { Styled, jsx } from "theme-ui"
import { Link, graphql } from "gatsby"
import Layout from "../components/Organisms/Layout"
import SEO from "./seo"
import Img from "gatsby-image"

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

export const query = graphql`
  query {
    imageOne: file(relativePath: { eq: "bookshelf.jpg" }) {
      ...fluidImage
    }
    imageTwo: file(relativePath: { eq: "symposium.jpg" }) {
      ...fluidImage
    }
    imageThree: file(relativePath: { eq: "workshop.jpg" }) {
      ...fluidImage
    }
  }
`

const TestingPage = ({ data }) => {
  return (
    <Layout>
      <SEO title="TestingPage" />
      <Styled.h4>Testing Page</Styled.h4>

      <Styled.h6>Image should appear below</Styled.h6>
      <Img
        className="bookshelf"
        fluid={data.imageOne.childImageSharp.fluid}
        alt="bookshelf"
      />
      <Img
        className="workshop"
        fluid={data.imageThree.childImageSharp.fluid}
        alt="workshop"
      />
      <Img
        className="symposium"
        fluid={data.imageTwo.childImageSharp.fluid}
        alt="symposium"
      />
      <Styled.p>
        <Link to="/page-2/">Go to page 2</Link>
      </Styled.p>
    </Layout>
  )
}

export default TestingPage