leaflet map exceeds the container height and appears as small squares [duplicate]

Question

I want to include a map in my project but I'm facing a weird behaviour of leaflet library as is shown in the photo below (I want the map to fill the black area) :

also, notice that there are 2 scrollers

there are some classes that leaflet adds to the element, but I don't think it is the cause of the problem because I've used leaflet a couple of times before and never faced this.

here are the related codes ..

html :

  <section class="location">
    <div id="map" class="location__map"></div>
    <div class="location__info">
      <!--  -->
    </div>
  </section>

scss :

.location {
  margin-top: var(--section-margin-top);
  grid-column: centre-start / centre-end;
  max-height: 50vh;

  &__map {
    background-color: black;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    width: 80%;
    max-height: 100%;
    margin-left: 4rem;
    position: relative;


    &::before {
      content: "";
      display: block;
      position: absolute;
      width: 40%;
      height: 100%;
      top: -28%;
      left: -15%;
      background-color: var(--accent-2);
      z-index: -1;
    }
  }

  &__info {
  }
}

app.js:

import { gsapAnimation } from "./script/gsapAnimation.js";
import { map } from "./script/map.js";

window.addEventListener("load", () => {
  gsapAnimation();
  map();
});

map.js (this part of code is an example from leaflet docs) :

import "leaflet";

export const map = () => {
  const map = L.map("map").setView([51.505, -0.09], 13);

  L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", {
    attribution:
      '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
  }).addTo(map);

  L.marker([51.5, -0.09])
    .addTo(map)
    .bindPopup("A pretty CSS popup.<br> Easily customizable.")
    .openPopup();
}

EDIT: this line of code solved my problem import "leaflet/dist/leaflet.css";