I am using angular 18.2.3 and while i am using leaflet map into my page. and retrive map from url and clicked on my shapeareas in the map. it show this weird shape map only in chrome. but why is this happening i don't figure out.

this. is my map generation code in dashboardponent.ts:

this.map = L.map('map_dashboard', {
        center: [23.743356, 90.244998],
        zoom: 7.3,
        minZoom: 7.3,
        maxZoom: 8.3,
        zoomSnap: 0.1,
        wheelPxPerZoomLevel: 100
      });

      L.tileLayer('https://{s}.basemaps.cartocdn/rastertiles/voyager/{z}/{x}/{y}{r}.png', {
        maxZoom: 18,
        attribution: '<span>&copy;  <a href=";> RIMES </a>'
      }).addTo(this.map);
      this.mapService.getAdm1Map().subscribe((res:any)=>{
        this.layerGroup.clearLayers()
        let layer = L.geoJSON(res, {
          style: (feature) => (
            color: "#000000",
            weight: 1,
            opacity: 1,
            fillOpacity: 1,
            fillColor: "#b03131",
            stroke: true
          ),
          onEachFeature: function onEachFeature(features, layer) {
            let location = features.properties;
            let tooltipContent = '<table class="table table-striped table-hover m-0 p-0"><tbody>';
            if (location.ADM3_EN) {
              tooltipContent += '<tr class="table-light"><td class="mb-0">Upazila</td><th class="mb-0">' + location.ADM3_EN + '</th></tr>';
            }
            if (location.ADM2_EN) {
              tooltipContent += '<tr class="table-light"><td class="mb-0">Division</td><th class="mb-0">' + location.ADM2_EN + '</th></tr>';
            }
            if (location.ADM1_EN) {
              tooltipContent += '<tr class="table-light"><td class="mb-0">District</td><th class="mb-0">' + location.ADM1_EN + '</th></tr>';
            }
            if (location.ADM0_EN) {
              tooltipContent += '<tr class="table-light"><td class="mb-0">Country</td><th class="mb-0">' + location.ADM0_EN + '</th></tr>';
            }

            tooltipContent += '</tbody></table>';
            layer.bindTooltip(tooltipContent);
          }
        }).addTo(this.layerGroup)
        this.layerGroup.addTo(this.map)
        this.map.flyToBounds(layer.getBounds())
      })

html:

 <div class="template-demo">
     <div id="map_dashboard" style="height: 750px; width: 100%; border: none"></div>
 </div>

Can anyone tell me what am i missing here?