How to define backgroundImageUrl on React/GatsbyJs

Question

I have a website project with a parallax component on a page component. I am trying to bind an graphql image query response to background-image url style attribute but could not figure out how to write it.

Here is my code:

import React from 'react'
import { StaticQuery, graphql } from 'gatsby'
import { Parallax, ParallaxLayer } from 'react-spring/renderprops-addons'
import Img from 'gatsby-image'




export default class Teaser extends React.Component {
  constructor(props){
    super(props);
  }

  render () {
    return (
      <Parallax ref={ref => (this.parallax = ref)} pages={3}>
        <ParallaxLayer offset={0} speed={0} factor={3} style={{backgroundImage=url(${this.props.images.edges[0].childImageSharp.fluid.src})}}>

        </ParallaxLayer>
      </Parallax>

      )
  }
}

export const query=graphql`
    query {
        images: allFile(filter:{relativePath:{eq: "chef.jpg"}}) {
          edges {
              node {
                extension
                relativePath
                childImageSharp {
                  fluid {
                    ...GatsbyImageSharpFluid
                  }
                }
        }
      }
      }
      }

It is the background image declaration on style attribute for the ParallaxLayer. What I want to achieve is for the image slightly to move within the container up when scrolling down and down when scrolling up,

Thanks for the help in advance.