Map isn't showing up using react-leaflet, but not logging any errors

The code is running perfectly after 5 hours of not getting my dashboard to show up, however now the map just isnt showing up and when i check the console i get no error, any thoughts? I followed the tutorial on react-leaflet exactly as they said and can't get this to show up

import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet";
import "leaflet/dist/leaflet.css";

export default function Dashboard({ setUser, setAuthState, user }) {
  useEffect(() => {
    console.log(user);
    getUserData(user);
  }, []);

  const [issData, setIssData] = useState(null);

  useEffect(() => {
    getIssData().then((data) => {
      setIssData(data);
    });
  }, [issData]);

  return (
    <div className="dashboard">
      <Nav />
      <div className="main">
        <MenuPopupState
          setUser={setUser}
          setAuthState={setAuthState}
          user={user}
        />
      </div>
      <Fire user={user} />
      <div>
        {issData ? (
          <div>
            <h1>Current Position of ISS</h1>
            <p>Latitude: {issData.iss_position.latitude}</p>
            <p>Longitude: {issData.iss_position.longitude}</p>
          </div>
        ) : (
          <p>Loading...</p>
        )}
      </div>
      <div>
        <MapContainer
          center={[51.505, -0.09]}
          zoom={13}
          scrollWheelZoom={false}
          height="100px"
        >
          <TileLayer
            attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
            url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
          />
          <Marker position={[51.505, -0.09]}>
            <Popup>
              A pretty CSS3 popup. <br /> Easily customizable.
            </Popup>
          </Marker>
        </MapContainer>
      </div>
    </div>
  );
}


I tried to display the map from leaflet and now the code seems to be working but im not getting any map from leaflet