Как отделить элементы?

Question

Я использую pure-react-carousel для изготовления карусели, где мои статьи получают на map function. Но проблема в том, что статьи не занимают своего места, и все они находятся в одном индексе. Я сделал журнал индекса, попадающего на карту, и он в порядке. Итак, проблема должна Slide, но я не знаю почему.

Я могу go перейти к следующему индексу, но у меня нет статьи, и это ничего.

Мой javascript код:

<CarouselProvider naturalSlideWidth={1000} totalSlides={similarPosts.length} infinite={true} dragEnabled={true} className='carousel'>
  <div className='carousel-buttons'>
    <ButtonBack className='back-button'><img src='https://cdn.discordapp.com/attachments/573915112440594432/696632770134540288/back.png'></img></ButtonBack>
    <ButtonNext><img src='https://cdn.discordapp.com/attachments/573915112440594432/696632757652291715/next.png'></img></ButtonNext>
  </div>

  <Slider className='carousel-slider'>
    <>
      {similarPosts.slice(0).reverse().map((x, i) => (
        <Slide index={i}> // and the articles are in the same window
          {x[5] != articleData[7] && x[5] != user && x[8] ?
            <>
              <Fade center>
                <Link to='/Article' onClick={() => handleOpenArticle(x[5])} className='post' id={x[5]}>
                  <div className='post-infos'>
                    <h2>{x[0]}</h2>
                    <p>{x[1]}</p>
                  </div>

                  <div className='author-infos'>
                    <Link to='/Profile' onClick={(e) => handleOpenProfile(e, x)} className='author-link'><p>{x[6]}</p></Link>
                    <p>{x[3]}</p>
                  </div>
                </Link>
              </Fade>
            </>

            :

            null
          }
        </Slide>
      ))}
    </>
  </Slider>
</CarouselProvider>

Мой css код:

.carousel {
  width: 90vw;
  padding: 20px;
}

.carousel-slider {
  height: 50vh;
}

.carousel-slider div.react-reveal {
  display: flex;
  justify-content: center;
  align-items: center;

  position: relative;
}

.carousel-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  flex-wrap: wrap;

  margin: 15px 0;
}

.carousel-buttons button {
  transition: .15s;

  border: none;
  background: none;

  margin: 0 2vw;
}

.carousel-buttons button:hover {
  transition: .15s;
  transform: scale(1.05);
}

.carousel-buttons button img {
  width: 3vw;
  height: 3vw;
}

Пример: