Leaflet: obtain X and Y (pixel points) from GeoJSON lat, lon

Question

I have a Geojson with Cities location. I'm trying to use the City Lat/Lon to send a WMS GetFeatureInfo to my Geoserver to add additional info to the label (temperature data), but I can't get the X and Y to pass in the request.

I've tried using the following code, but the ressponse is always different from a zoom level to another.

 var latlng = [GeoJsonLat,GeoJsonLon];

 var pixelPosition = map.latLngToLayerPoint(latlng);

Zoom Level 3:

Zoom Level 4:

And so on...

What am I doing wrong? Is there any alternative that I can use?

Update:

From the above code (lat, lon from GeoJson), pointing on Rome at ZoomLevel = 3, X=231and Y=340, while clicking on Rome with the mouse I get x=232 and y= 345

My Layer code:

cityLayer = L.geoJSON(data, {
  pointToLayer: (feature, latlng) => {
    let emptyGroup = L.layerGroup();

    let marker = () => {
      let tempValue;
      let html;
      let lat = feature.properties.latitude;
      let lon = feature.properties.longitude;
      var latLng = latlng;
      var point = map.latLngToLayerPoint(latlng);
      let bbox = map.getBounds().toBBoxString();
      var BBOX = map.getBounds().toBBoxString(); //coordinates
      var WIDTH = map.getSize().x;
      var HEIGHT = map.getSize().y;
      var X = point.x;
      var Y = point.y;
      console.log("X = ", X, " Y = ", Y);
      fetch(
        `https://www.xtreme-weather.com/maps/gfs/wms?` +
          "service=wms&version=1.1.0&request=GetFeatureInfo&layers=gfs:tempGfs&query_layers=gfs:tempGfs&styles=" + 
          "&bbox=" + BBOX +
          "&feature_count=1" + 
          "&height=" + HEIGHT +
          "&width=" + WIDTH +
          "&format=image%2Fpng&info_format=application%2Fjson&srs=EPSG:4326" + 
          "&x=" + X +
          "&y=" + Y +
          "&time=" + validityTime +
          "&elevation=1002",
        { cache: "no-cache" }
      )
        .then((response) => response.json())
        .then((data) => {
          data.features.forEach((proerties) => {
            dataValue = proerties.properties.GRAY_INDEX;
            tempValue = dataValue.toFixed(2);
            // console.log(`<span class="my-div-span" style="color:white; width:100%;font-size:8px">${decode_utf8(feature.properties.name)}<br>${tempValue}</span>`)
            // return dataValue.toFixed(2)
            new L.Marker(latLng, {
              icon: new L.DivIcon({
                className: "div-icon",
                html: `<span class="my-div-span" style="color:white; width:100%;font-size:8px">${decode_utf8(
                  feature.properties.name
                )}<br>${tempValue}</span>`,
              }),
              zIndexOffset: 10000,
            }).addTo(emptyGroup);
          });
        });
      // return tempValue
    };
    marker();
    // marker.addTo(emptyGroup)
    return emptyGroup;
  },
});