i using leaflet into my vue web app, i doesnt have any errors in my console, but the map look strange. here is my code to show map look like

export default defineComponent({
  name: 'CommonMap',
  props: {
    locations: {
      type: Array as PropType<Location[]>,
      required: true
    }
  },
  setup(props) {
    const initialLatitude = -5.1595465;
    const initialLongitude = 119.441659;
    const initialZoom = 13;
    const maxZoom = 18;
    const minZoom = 13;

    const southWest = leaflet.latLng(-5.2, 119.3);
    const northEast = leaflet.latLng(-5.1, 119.5);
    const bounds = leaflet.latLngBounds(southWest, northEast);

    let map: leaflet.Map;

    onMounted(() => {
      map = leaflet.map('map', {
        maxBounds: bounds,
        maxBoundsViscosity: 1.0,
        minZoom: minZoom,
        maxZoom: maxZoom,
        attributionControl: false // Add this line to remove attribution control
      })
      .setView([initialLatitude, initialLongitude], initialZoom);

      leaflet.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 19,
      }).addTo(map);

    });

    const zoomToLocation = (location: Location) => {
      map.flyTo([location.coordinates[1], location.coordinates[0]], 16, {
        animate: true,
        duration: 1.5
      });
    };

    return {
      zoomToLocation
    };
  },
});

did i miss somethings?

this is how i call my leaflet

import * as leaflet from 'leaflet';

and i using leaflet

"leaflet": "^1.9.4",

i want it to be a normal map, that showing full map