ReactJS - мои слайдеры с фоновыми изображениями не отображают изображения

Question

• вот моя модель: https://codepen.io/joondoe/pen/oRzQVX
• вот мое испытание: https://codesandbox.io/s/woj96pn59l

Я бы воспроизвел слайдер фонового изображения модели с ReactJS.

Я пытаюсь отобразить изображение в моем ползунке ReactionJS, как в модели, но оно не работает, мое фоновое изображение ничего не показывает и выглядит как крошечная полоса разметки, когда я помещаю содержимое в компонент Slide, например <div> content </div>.

Вот мой ответный фрагмент:

const Slide = ({ slideRef, image, i }) => {
  console.log("image: ", image);
  const style = {
    backgroundImage: `url(${image})`,
    backgroundSize: "cover",
    backgroundRepeat: "no-repeat",
    backgroundPosition: "50% 60%"
  };
  return <div ref={slideRef} className={style.slide_item} style={style} />;
};

       <div className={style.slide_container} style={styleContainer}>
              {this.state.imageStock.map((image, index) => {
                console.log("image in map: ", image);
                return (
                  <Slide
                    i={index}
                    slideRef={this.slide}
                    key={index}
                    image={image}
                  />
                );
              })}
            </div>

вот мой фрагмент CSS:

   /* style injection in React component => true */

    .slide_metacontainer {
      position: relative;
      width: 500px;
      margin: 0 auto;
      height: 500px;
      overflow: hidden;
      white-space: nowrap;
      background: pink;
    }

    .slide_container {
      position: relative;
      height: 100%;
      width: 100%;
      background: yellow;
      display: flex;
    }

    .slide_item {
      display: inline-block;
      min-height: 500px;
      width: 100%;
      background: blue;
    }

Как заставить мой слайдер работать? Любой намек был бы великолепен, спасибо