linear-gradient over Gatsby-Background-Image

I have an image that I reference from with a Graphql query in my code. Over this image I want to have a linear-gradient, which is located in my css module. How can I go about this without using css written in my javascript file?

Having the linear-gradient written in the js file does actually work, but it puts my css style where I don't want it. How can I reference my gradient style in the css module and make it work with Gatsby-Background-Image?

Using the heroGradient class in the css-module file overwrites the whole image. How do I preserve the image in the stack without overwriting it, only applying the gradient on top?

const {image} = useStaticQuery(graphql`
    query {
      image: file(relativePath: { eq: "filename.jpg" }) {
        childImageSharp {
          fluid(quality: 100) {
            ...GatsbyImageSharpFluid_withWebp
          }
        }
      }
    }
`)
// This works
// const imageDataStack = [image.childImageSharp.fluid, `linear-gradient(270deg, #ffffff27 30%,  #e8d4b450 100%)`].reverse()
// This doesn't work
const imageDataStack = [image.childImageSharp.fluid, heroStyles.heroGradient].reverse()
  return (
    <BackgroundImage 
      Tag="section"
      className={heroStyles.heroContent}
      fluid={imageDataStack}
      >
      <h1 className={heroStyles.heroText}>
        {site.siteMetadata.description}
      </h1>
    </BackgroundImage>

.hero-gradient {
    background: linear-gradient(270deg, #ffffff27 30%,  #e8d4b450 100%);