Передача данных запроса stati c в массив

Question

Я пытаюсь использовать компонент ['response-grid-gallery'] [1] в моем проекте Gatsby. Это прекрасно работает, когда я копирую / вставляю пример кода. Но когда я хочу использовать staticQuery для получения своих изображений, я не могу передать данные в массив IMAGES.

Вот мой код

import React from "react"
import { useStaticQuery, graphql } from "gatsby"
import imageGalleryStyles from "./imagegallery.module.css"
import Button from "../Button/Button"
import TwoCol from "../Layout/TwoCol"
import Gallery from "react-grid-gallery"

const ImageGallery = props => {
  const data = useStaticQuery(graphql`
    {
      file(name: { eq: "base-aerienne-Bricy-2-FEHR-Group" }) {
        publicURL
      }
    }
  `)
  console.log(data)

  const IMAGES = [
    {
      src: "https://c2.staticflickr.com/9/8817/28973449265_07e3aa5d2e_b.jpg",
      thumbnail:
        "https://c2.staticflickr.com/9/8817/28973449265_07e3aa5d2e_n.jpg",
      thumbnailWidth: 320,
      thumbnailHeight: 174,
      caption: "After Rain (Jeshu John - designerspics.com)",
    },
    {
      src:{data.file.publicURL},
      thumbnail:{data.file.publicURL},
      thumbnailWidth: 320,
      thumbnailHeight: 174,
      caption: "After Rain (Jeshu John - designerspics.com)",
    },
    {
      src: "https://c2.staticflickr.com/9/8356/28897120681_3b2c0f43e0_b.jpg",
      thumbnail:
        "https://c2.staticflickr.com/9/8356/28897120681_3b2c0f43e0_n.jpg",
      thumbnailWidth: 320,
      thumbnailHeight: 212,
      tags: [
        { value: "Ocean", title: "Ocean" },
        { value: "People", title: "People" },
      ],
      caption: "Boats (Jeshu John - designerspics.com)",
    },
  ]

  return (
    <div className={imageGalleryStyles.section}>
      <TwoCol>
        <div>
          <h2>{props.title}</h2>
          <Button
            buttonString="toutes nos réalisations"
            buttonURL="/realisations"
          ></Button>
        </div>
      </TwoCol>
      <Gallery enableImageSelection={false} images={IMAGES} />
    </div>
  )
}

export default ImageGallery

https://c2.staticflickr.com/9/8817/28973449265_07e3aa5d2e_b.jpg отображается отлично. Но изображение {data.file.publicURL} получает ошибку.

Знаете ли вы, как мне следует использовать мои данные в этом компоненте? Спасибо!

  [1]: https://github.com/benhowell/react-grid-gallery