Leaflet draw polygon is rendering/drawn wrongly shifting bit away from selected position in Angular 17 with ssr enabled

Question

We are using angular 17 and we have used leaflet and leaflet draw JavaScript plugin to plot the map and want to draw polygons, rectangle over it and get the boundary co-ordinates of the same. But when we draw a polygon/rectangle it actually draws the polygon/rectangle at wrong position, slightly shifted from actual selected position(white boxes are actual position in the pic attached below).

Angular ssr is enabled. Does it create some issue. Please help me out in this

Html section

HTML code as below

<div class="row">
   <strong>Select the Area </strong>
     <div class="col-8">
        <div id="mapid"></div>
     </div>
</div>

Below is our component code

import $ from 'jquery';
import { isPlatformBrowser } from '@angular/common';
declare var L: any;
..
..
..
ngAfterViewInit() {
    let current_comp = this;
    if (isPlatformBrowser(this.platformId)) {
      $(function () {
        current_comp.map = L.map('mapid', {}).setView([12.9834957, 77.5959527], 16);
        L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
          attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        }).addTo(current_comp.map);
        var editableLayers = new L.FeatureGroup();

        current_comp.map.addLayer(editableLayers);
        var drawControl = new L.Control.Draw({
          edit: {
            featureGroup: editableLayers,
            remove: true
          }, draw: {
            polyline: false,
            marker: false,
            circle: false,
            circlemarker: false
          }
        });
        // map.removeControl(drawControl);
        current_comp.map.addControl(drawControl);
     //   current_comp.map.addControl(drawControl);

        function makePopupContent(feature: any) {
          return feature.geometry.coordinates[0]
        }

        current_comp.map.on('draw:created', function (e: any) {
          var type = e.layerType,
            layer = e.layer;
          layer.setStyle({
            fillColor: '#0000CC', opacity: 0.1
          })
          var feature = layer.toGeoJSON();
          current_comp.boundary_co_ordinates = makePopupContent(feature);
          console.log(current_comp.boundary_co_ordinates);

          if (type === 'marker') {
            layer.bindPopup('A popup!');
          }

          editableLayers.addLayer(layer);
        });

        current_comp.map.on('draw:deleted', function (e: any) {
          console.log("Delete button is clicked");
          for (var i = 0; i < current_comp.markers_list.length; i++) {
            current_comp.map.removeLayer(current_comp.markers_list[i]);
            current_comp.map.removeLayer(current_comp.circle_list[i]);
          }
        })
      });
    }
  }