I'm trying to make a Carousel that works with MUI components which the one I found is this one react-material-ui-carousel, but for some reason is not working properly (or maybe as usual I'm doing something wrong)

So this is what I have (and it works)

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 "./Images/CityA.jpg"
import CityB from "./Images/CityB.jpg"

function Item(props)
{
    return (
        <Card sx={{ width: "50%"}}>
          <CardMedia
        component="img"
        height="25%"
        image={props.item.img}
      />
        </Card>
    )
}

function Home() {

  var items = [
    {
        img: CityA
    },
    {
      img: CityB
    }
  ]

    return (
     <Carousel >
            {items.map( (item, i) => <Item key={i} item={item} />)}
     </Carousel>
    )
}

export default Home

This is the output of that code alone:

As you can see the it is working all good however if I try to add it as a part of my "Route" it breaks horribly

import React, { useEffect, useState } from "react";
import {BrowserRouter as Router, Routes, Route } from "react-router-dom"
import Header from "./Header";
import Home from "./Home";

function App() {
  return (
    < div className="app" >
    <Router>
        <Routes>

          <Route path = "/" element={<Header/>}>
            <Route path = "/" element = {<Home/>} />
          </Route>
          
        </Routes>
    </Router>
  </div >
  );
}

export default App;

it then looks like this:

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

Working demo here -> Demo

What I would like to achieve ->