Получите GraphQL на Gatsby, чтобы изменить изображение героя в зависимости от размера окна

Question

Я пытаюсь заставить GraphQL изменять изображение моего героя в зависимости от размера окна. У меня всего 4 изображения, но я могу изменить их только между двумя из 4. Может ли кто-нибудь сказать мне, что мне не хватает? Я убедился, что в моих источниках изображений нет опечаток. Первое изображение (маленький мешок для воды) работает, как и второе (kids-at-pump-small), но оно не обновляется до двух последних изображений (kids-at-pump-medium и kids-at- насосы). Думаю, Код ниже.

import React, { useState, useEffect } from "react"
import Image from 'gatsby-image';
import { graphql } from "gatsby"
import Layout from "../components/layout"



export default function About({ data }) {
    const sources = [
        data.mobileHeroImage.childImageSharp.fluid,
        {
            ...data.tabletHeroImage.childImageSharp.fluid,
            media: `(min-width: 768px)`,
        },
        {
            ...data.tabletWideHeroImage.childImageSharp.fluid,
            media: `(min-width: 1024px)`,
        },
        {
            ...data.desktopHeroImage.childImageSharp.fluid,
            media: `(min-width: 1200px)`,
        },


    ]

    return (
        <Layout>

            <Image fluid={sources} />
            <br />

        </Layout>
    )
}

export const pageQuery = graphql`
query {
    mobileHeroImage: file(relativePath: { eq: "water-bag-small.jpg" }) {
      childImageSharp {
        fluid(maxWidth: 640, quality: 100) {
          ...GatsbyImageSharpFluid
        }
      }
    }
    tabletHeroImage: file(
        relativePath: { eq: "kids-at-pumps-small.jpg" }
      ) {
        childImageSharp {
          fluid(maxWidth: 1024, quality: 100) {
            ...GatsbyImageSharpFluid
          }
        }
      }
      tabletWideHeroImage: file(
        relativePath: { eq: "kids-at-pumps-medium.jpg" }
      ) {
        childImageSharp {
          fluid(maxWidth: 1200, quality: 100) {
            ...GatsbyImageSharpFluid
          }
        }
      }

      desktopHeroImage: file(
      relativePath: { eq: "kids-at-pumps.jpg" }
    ) {
      childImageSharp {
        fluid(maxWidth: 1600, quality: 100) {
          ...GatsbyImageSharpFluid
        }
      }
    }
  }
`