How to send Gatsby-Image to component as property

I've been trying to figure out how to use Gatsby-image with components and I just can't seem to figure it out.

I'm using Gatsby-image, gatsby-transformer-sharp, gatsby-plugin-sharp.

Here's my query:

export const pageQuery = graphql`
  query {
    imageOne: file(relativePath: { eq: "tbbs1.jpg" }) {
      childImageSharp {
        fluid(maxWidth: 1000) {
          ...GatsbyImageSharpFluid
        }
      }
    }
  }
`

and using it like this works fine as many tutorials show:

<Img fluid={props.data.imageOne.childImageSharp.fluid} />

Here is the component

import React, { Component } from "react";
import Slider from "react-slick";
import Img from "gatsby-image";


export default class SimpleSlider extends Component {
  constructor(props) {
    super(props);
    this.next = this.next.bind(this);
  }
  next() {
    this.slider.slickNext();
  }
  render() {
    const settings = {
      dots: true,
      lazyLoad: 'progressive',
      arrows: false,
      infinite: true,
      speed: 500,
      slidesToShow: 1,
      slidesToScroll: 1
    };

    let slides = this.props.bilder.map( (item, index) =>
      (
        <div key={index} className="slide-container">
          <div className="slider-box" onClick={this.next}>
            <img src={this.props.bilder[index]} alt=""/>
          </div>
        </div>
      )
    );

    return (
      <div id="work" className="slick-container">
        <div className="title-desc-container">
          <h3>{this.props.title}</h3>
          <p>{this.props.desc}</p>
        </div>
        <Slider ref={c => (this.slider = c)} {...settings}>
          {slides}
        </Slider>
      </div>
    );
  }
}

but what I'd like to do is something like this:

<SimpleSlider title="title" desc="description" images={[props.data.imageOne.childImageSharp.fluid, props.data.imageTwo.childImageSharp.fluid]} />

I'm guessing there's an easy solution for this, but I haven't found it yet.

Any help is greatly appreciated!

Thanks!