pure-react-carouselについて

Question

#わからないこと、聞きたいこと
pure-react-carouselを用いてカルーセルデザインを作ろうとしています。
App.js内で以下のようにしてヘッダー、メイン部分、フッターを表示させており、メイン部分にてカルーセルを表示させようとしています。

return (
      <BrowserRouter>
        <Header />
        <Main />
        <Footer />
      </BrowserRouter>
    );

return (
            <CarouselProvider
                naturalSlideWidth={100}
                naturalSlideHeight={125}
                totalSlides={3}
            >
                <Slider>
                    <Slide index={0}>I am the first Slide.</Slide>
                    <Slide index={1}>I am the second Slide.</Slide>
                    <Slide index={2}>I am the third Slide.</Slide>
                </Slider>
                <ButtonBack>Back</ButtonBack>
                <ButtonNext>Next</ButtonNext>
            </CarouselProvider>
    );

pure-react-carouselを使うと、スライドの部分だけヘッダーとフッターの間で表示され、'Back'と'Next'のボタンはフッターの下のページの一番下部に表示されてしまいます。
スライドのすぐ下らへんに表示させたいのですが、うまくいきません。
どこを修正したら良いのでしょうか？よろしくおねがいします。

Answer 1

carousel.jsをmain.jsにインポートしていたのですが、これをインポートせずに別々に表示するようにしたら解決しました。