Проблема с использованием React-Slick с функцией запроса graphql

Question

Я пытаюсь использовать ответную реакцию, чтобы представить карусель из нескольких элементов в моем проекте, но у меня возникают проблемы с отображением данных, которые появляются в моем запросе graphql. Только когда я кладу предметы вручную, карусель работает очень хорошо ... но идея не в этом.

Тогда я поставил код, который хорошо работает:

------ SliderCarousel.js ------

  import React from 'react'

  import Slider from "react-slick"

  import { Grid } from '@material-ui/core';

  /** @jsx jsx */
  import { jsx, css } from '@emotion/core'

  const borde = css({
  borderStyle: 'solid',
  })

  const contenedorCarousel = css({

  padding:30,
  backgroundColor: '#39854A'
  })
  const itemCarousel = css({
 })

  const itemBody = css({
  marginLeft: 5,
  height: 136,
  width: 136,
  backgroundColor: 'white',
  borderRadius: 12
  })

  const titulo = css({
  paddingTop: 10
  })
  const SliderCarousel  = props =>{

  const settings = {
        dots: false,
        infinite: true,
        speed: 1100,
        slidesToShow: 6,
        slidesToScroll: 3,
        autoplay: true,
        autoplaySpeed: 8000
      }
  return (
        <div css={contenedorCarousel}>
              <Slider {...settings}>
                     <div css={itemCarousel}><div css={itemBody}>
                          <Grid container
                          direction="column"
                          justify="center"
                          alignItems="center">
                                <Grid item css={titulo}>1</Grid>
                                <Grid item css={[{
                                backgroundImage:  
                           `url('${require('../../images/productos/
                            5c89b2b19268c22ab85a24c5.png')}')`,
                                backgroundSize: 'contain',
                                backgroundRepeat: 'no-repeat',
                                height: 90,
                                width: 90,}]}></Grid>
                          </Grid>
                          </div></div>
                          <div css={itemCarousel}><div css={itemBody}>
                          <Grid container
                          direction="column"
                          justify="center"
                          alignItems="center">
                                <Grid item css={titulo}>2</Grid>
                                <Grid item css={[{
                                backgroundImage:  
                               `url('${require('../../images/productos/
                                5c89b2b19268c22ab85a24c5.png')}')`,
                                backgroundSize: 'contain',
                                backgroundRepeat: 'no-repeat',
                                height: 90,
                                width: 90,}]}></Grid>
                          </Grid>
                    </div></div>
                    </Slider>
                   </div>

                    )


                    }
                   export default SliderCarousel

---- Следующий код показывает элементы в горизонтальной ориентации и не работает визуально. Я думаю, что это проблема при рендеринге элементов, которые проходят через graphql.

import React from 'react'
import ItemCarrousel from '../Productos/ItemCarrousel'
import Slider from "react-slick"
import { Query } from "react-apollo"
import gql from "graphql-tag";
import { Grid } from '@material-ui/core';

/** @jsx jsx */
import { jsx, css } from '@emotion/core'

 const borde = css({
  borderStyle: 'solid',
 })

const contenedorCarousel = css({

  padding:30,
  backgroundColor: '#39854A'
})
const itemCarousel = css({


 })

  const itemBody = css({
  marginLeft: 5,
  height: 136,
  width: 136,
  backgroundColor: 'white',
  borderRadius: 12
 })

  const titulo = css({
  paddingTop: 10
  })


   export const PRODUCTOS = gql`
   query productos{
    products{
    _id
    title
   price

   }
  }

 `;
 const SliderCarousel  = props =>{

  const settings = {
        dots: false,
        infinite: true,
        speed: 1100,
        slidesToShow: 6,
        slidesToScroll: 3,
        autoplay: true,
        autoplaySpeed: 8000
      }
  return (
        <div css={contenedorCarousel}>
              <Slider {...settings}>

                    <Query query={PRODUCTOS}>
                    {({loading,error,data})=>{
                          if (loading) return "Loading...."
                          if (error) return `Error!: ${error}`
                          console.log(data)
                         return data.products.map((product, key) => <div css= 
                         {itemCarousel}>
                         <div css={itemBody}>
                          <Grid container
                          direction="column"
                          justify="center"
                          alignItems="center">
                                <Grid item css={titulo}>{product.title}</Grid>
                                <Grid item css={[{
                                backgroundImage:  
                        `url('${require('../../images/productos/
                         5c89b2b19268c22ab85a24c5.png')}')`,
                                backgroundSize: 'contain',
                                backgroundRepeat: 'no-repeat',
                                height: 90,
                                width: 90,}]}></Grid>
                          </Grid>
                          </div>
                    </div>
                          )               
                    }}  
                    </Query>
                    </Slider>
        </div>

           )


            }
           export default SliderCarousel