パスを渡せばgatsby-imageで画像表示(desktopとmobileを切り分けたい)

Gatsby.jsを始めたばかりの初心者です。

画像の取り扱いについて

import React from 'react'
import { StaticQuery, graphql } from 'gatsby'
import Img from 'gatsby-image'

// 画像ファイルパスをプロパティに取るようなコンポーネントを定義
export default ({ filename }) => (

  // ページじゃないコンポーネントでもGraphQLが使えるように
  // StaticQueryタグを使う
  <StaticQuery

    // GraphQLのクエリ引数には何も指定しない！
    query={graphql`
      query {
        images: allFile {
          edges {
            node {
              relativePath
              name
              childImageSharp {
                sizes(maxWidth: 800) {
                  ...GatsbyImageSharpSizes
                }
              }
            }
          }
        }
      }
    `}

    // 全画像情報がdataに代入されている
    render={(data) => {

      // 指定した画像ファイルパス（コンポーネントのプロパティ）と
      // 一致するgatsby-image用の情報を取得
      const image = data.images.edges.find(n => {
        return n.node.relativePath.includes(filename)
      })

      if (!image) return
      
      // Imgタグでgatsby-imageで最適化された画像を表示する
      const imageSizes = image.node.childImageSharp.sizes
      return <Img　sizes={imageSizes} />
    }}
  />
)

上記を参考に、パスを渡せばgatsby-imageで画像を表示はできるのですが、
desktopとmobileの画像を分けて表示させるには、
https://www.gatsbyjs.org/packages/gatsby-image/#art-directing-multiple-images

jsx
1import React from "react"
2import { graphql } from "gatsby"
3import Img from "gatsby-image"
4
5export default ({ data }) => {
6  // Set up the array of image data and `media` keys.
7  // You can have as many entries as you'd like.
8  const sources = [
9    data.mobileImage.childImageSharp.fluid,
10    {
11      ...data.desktopImage.childImageSharp.fluid,
12      media: `(min-width: 768px)`,
13    },
14  ]
15
16  return (
17    <div>
18      <h1>Hello art-directed gatsby-image</h1>
19      <Img fluid={sources} />
20    </div>
21  )
22}
23
24export const query = graphql`
25  query {
26    mobileImage: file(relativePath: { eq: "blog/avatars/kyle-mathews.jpeg" }) {
27      childImageSharp {
28        fluid(maxWidth: 1000, quality: 100) {
29          ...GatsbyImageSharpFluid
30        }
31      }
32    }
33    desktopImage: file(
34      relativePath: { eq: "blog/avatars/kyle-mathews-desktop.jpeg" }
35    ) {
36      childImageSharp {
37        fluid(maxWidth: 2000, quality: 100) {
38          ...GatsbyImageSharpFluid
39        }
40      }
41    }
42  }
43`