Карусель (чистый CSS и npms) плохо отображается в ReactJS

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

изображение результата

все дочерние элементы отображаются в вертикальной строке.

Я пробовал с этими кодами:

https://www.npmjs.com/package/реагировать-отклик-карусель

https://www.npmjs.com/package/pure-реагировать-карусель

и во всем это тот же результат, у меня нет стиля в классе css

import React, {Component} from 'react';
import { CarouselProvider, Slider, Slide, ButtonBack, ButtonNext } 
 from 'pure-react-carousel';

class App extends Component {
render()  {
    return (
      <div className = "App">
          <CarouselProvider
              naturalSlideWidth = {30}
              naturalSlideHeight = {10}
              totalSlides = {3}
            >
              <Slide index = {0}>
                  <img src = "/img/Gallery01.png" />
              </Slide>
              <Slide index = {1}>
                  <img src = "/img/Gallery01.png" />
              </Slide>
              <Slide index = {2}>
                  <img src = "/img/Gallery01.png" />
              </Slide>
            </CarouselProvider>
      </div>
    );
  }
}
export default App;