Выбор изображения на основе проп в Гэтсби с помощью gatsby-background-image

Question

Это не то, с чем я столкнулся, поэтому я не уверен, как правильно это сформулировать.

Я хочу обновить это значение здесь:

fluid={lookingtoupdatethisvalue.childImageSharp.fluid}

на основе значения реквизита в компоненте Сервис. Выборы: weddingImg, publicImg, corporateImg

Поскольку я использую обработку изображений, лучший способ, о котором я мог подумать, - это создать несколько запросов и выбрать один для использования на основе значения проп. Я даже не уверен, возможно ли это, но, как я уже сказал, у меня нет текущих знаний, чтобы знать, что такое, а что нет. Любая помощь приветствуется

import React from "react"
import styled from "styled-components"
import { Container, Row, Col, Button } from "react-bootstrap"
import { useStaticQuery, graphql } from "gatsby"
import BackgroundImage from "gatsby-background-image"
import Title from "../components/Title"

const Service = ({ service, serviceImg, description, link, title, subTitle }) => {
  const {weddingImg, corporateImg, publicImg} = useStaticQuery(graphql`
    query {
        weddingImg: file(relativePath: { eq: "wedding-fireworks.jpg" }) {
            childImageSharp {
                fluid(quality: 90, maxWidth: 1920) {
                    ...GatsbyImageSharpFluid_withWebp
                }
            }
        }
        corporateImg: file(relativePath: { eq: "corporate-fireworks.jpg" }) {
            childImageSharp {
                fluid(quality: 90, maxWidth: 1920) {
                ...GatsbyImageSharpFluid_withWebp
                }
            }
        }
        publicImg: file(relativePath: { eq: "public-fireworks.jpg" }) {
            childImageSharp {
                fluid(quality: 90, maxWidth: 1920) {
                ...GatsbyImageSharpFluid_withWebp
                }
            }
        }
    }
  `)

  console.log(serviceImg);

  return (
    <BackgroundImage
      Tag="section"
      className="service py-5 text-white"
      fluid={serviceImg.childImageSharp.fluid}
      backgroundColor={`#040e18`}
    >
      <Container>
        <Row>
          <Col xs={12} md={6}>
            <h3>Services</h3>
            <Title title={title} subtitle={subTitle} />
            <p>{description}</p>
            <Button variant="outline-light" className="mx-1">
              <a href={link}>Find Out More</a>
            </Button>
          </Col>
        </Row>
      </Container>
    </BackgroundImage>
  )
}

const ServiceWrapper = styled.div``

export default Service

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.5.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.5.2/umd/react-dom.production.min.js"></script>