title: React boostrap carousel not working
body: <p>I'm trying to create a simple carousel using react-bootstrap.
  This is the simple uncontrolled carousel I'm trying to create.
  <a href="https://react-bootstrap.github.io/components/carousel/" rel="noreferrer">https://react-bootstrap.github.io/components/carousel/</a></p>
  
  <p>This is my code,</p>
  
  <pre><code>import React from 'react';
  import Carousel1 from '../../../assets/FootTheBall_SignUpScreen_CarouselImage-01.png';
  import Carousel2 from '../../../assets/FootTheBall_SignUpScreen_CarouselImage-02.png';
  import Carousel3 from '../../../assets/FootTheBall_SignUpScreen_CarouselImage-03.png';
  import Carousel4 from 
  import Carousel from 'react-bootstrap/lib/Carousel';
  
  
      const Core = () =&gt; (
          &lt;main className="core"&gt;
              &lt;article className="left"&gt;
                  &lt;Carousel&gt;
                      &lt;Carousel.Item&gt;
                          &lt;img src={Carousel1} alt=""/&gt;
                      &lt;/Carousel.Item&gt;
                      &lt;Carousel.Item&gt;
                          &lt;img src={Carousel2} alt=""/&gt;
                      &lt;/Carousel.Item&gt;
                      &lt;Carousel.Item&gt;
                          &lt;img src={Carousel3} alt=""/&gt;
                      &lt;/Carousel.Item&gt;
                  &lt;/Carousel&gt;
  
              &lt;/article&gt;
              &lt;article className="right"&gt;&lt;/article&gt;
          &lt;/main&gt;
  
      );
      export default Core
  </code></pre>
  
  <p>The images get vertically stacked and no transition happens. What am I doing wrong here.</p>