title: MUI Carousel not displaying properly
body: <p>I'm trying to make a Carousel that works with MUI components which the one I found is this one <a href="https://learus.github.io/react-material-ui-carousel/" rel="nofollow noreferrer">react-material-ui-carousel</a>, but for some reason is not working properly (or maybe as usual I'm doing something wrong)</p>
  <p>So this is what I have (and it works)</p>
  <pre><code>import React from 'react'
  import Carousel from 'react-material-ui-carousel'
  import { Card } from '@mui/material'
  import CardMedia from '@mui/material/CardMedia';
  import CityA from &quot;./Images/CityA.jpg&quot;
  import CityB from &quot;./Images/CityB.jpg&quot;
  
  function Item(props)
  {
      return (
          &lt;Card sx={{ width: &quot;50%&quot;}}&gt;
            &lt;CardMedia
          component=&quot;img&quot;
          height=&quot;25%&quot;
          image={props.item.img}
        /&gt;
          &lt;/Card&gt;
      )
  }
  
  function Home() {
  
    var items = [
      {
          img: CityA
      },
      {
        img: CityB
      }
    ]
  
      return (
       &lt;Carousel &gt;
              {items.map( (item, i) =&gt; &lt;Item key={i} item={item} /&gt;)}
       &lt;/Carousel&gt;
      )
  }
  
  export default Home
  </code></pre>
  <p>This is the output of that code alone:</p>
  <p><a href="https://i.stack.imgur.com/JCvj9.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/JCvj9.jpg" alt="enter image description here" /></a></p>
  <p>As you can see the it is working all good however if I try to add it as a part of my &quot;Route&quot; it breaks horribly</p>
  <pre><code>import React, { useEffect, useState } from &quot;react&quot;;
  import {BrowserRouter as Router, Routes, Route } from &quot;react-router-dom&quot;
  import Header from &quot;./Header&quot;;
  import Home from &quot;./Home&quot;;
  
  function App() {
    return (
      &lt; div className=&quot;app&quot; &gt;
      &lt;Router&gt;
          &lt;Routes&gt;
  
            &lt;Route path = &quot;/&quot; element={&lt;Header/&gt;}&gt;
              &lt;Route path = &quot;/&quot; element = {&lt;Home/&gt;} /&gt;
            &lt;/Route&gt;
            
          &lt;/Routes&gt;
      &lt;/Router&gt;
    &lt;/div &gt;
    );
  }
  </code></pre>
  <p>export default App;</p>
  <p>it then looks like this:</p>
  <p><a href="https://i.stack.imgur.com/wt12W.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wt12W.png" alt="enter image description here" /></a></p>
  <p>Super Small! even with 500% Zoom! like what just happened! any help/tip or even other method is welcome all I wanted to do was an image carousel :c</p>
  <p>Working demo here -&gt; <a href="https://codesandbox.io/s/cool-field-8bpgm?file=/src/App.js" rel="nofollow noreferrer">Demo</a></p>
  <p>What I would like to achieve -&gt;</p>
  <p><a href="https://i.stack.imgur.com/g3fr4.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/g3fr4.jpg" alt="enter image description here" /></a></p>