I am facing an error on Leaflet on Vue 3 whenever i try to zoom in or out when a popup is closed. The error on Mozilla:

Uncaught TypeError: this._map is null Popup.js

and the error on chrome

Uncaught TypeError: Cannot read properties of null (reading '_latLngToNewLayerPoint') Popup.js

Other than this, on some instances when the error occurs, the markers on the map stop moving with the zoom animation while zooming in and out. One of the solutions was to set soomAnimation as false which I cannot do with, I need the animations on my UI. I also tried a solution to properly unwrap / unproxy this.map before using it with Leaflet where I changed all the this.map instances in my script to toRaw(this.map) but the error still persists.

  L.geoJSON(geoJson, {
    onEachFeature: function (feature, layer) {
      self.onEachFeature(feature, layer);
      layer.on({
        click: self.clickMarker,
      });
    },
  }).addTo(self.markerLayer);

  self.markerLayer.addTo(toRaw(self.map));

I have tried updating Leaflet too but nothing works. Please Help