React-slick not rendering slides

Question

I'm using a plugin called react-slick for a carousel. I have tried to implement a carousel which has dynamic slides, however when it renders it doesn't seem to initialise each of the slides. Is it because the slider has initialised before the children?

this.extractData basically gets json object

createCarousel = () => {
    let data = this.extractData();
    const settings = {
        dots: true,
        infinite: true,
        speed: 500,
        slidesToShow: 1,
        slidesToScroll: 1
    };
    return(
        <Slider {...settings}>
            {data.map(function(object, i){
                return <testLayout data={object} key={i} />;
            })}
        </Slider>
    );
};

render() {

    return (
        <div className="difference">
            {this.createCarousel()}
        </div>
    );
}

testLayout

import React, { Component } from 'react';

class testLayout extends Component {

render() {
    let item = this.props.data.items;
    return (
        <div className="slide">
            <img src={item.imgUrl} alt=""/>
            <p>{item.text}</p>
        </div>
    );
}
}

export default testLayout;

any help would be much appreciated. Thanks

UPDATE - found fix https://github.com/akiran/react-slick/issues/328