Issues with GeoServer GetFeatureInfo request parameters

I managed to make GetFeatureInfo request but it has some issues still.
This is code:

function request(e) {
  var BBOX = that.mymap.getBounds().toBBoxString();
  var WIDTH = 101;
  var HEIGHT = 101;
  // var X = that.mymap.latLngToContainerPoint(
  //   e.latlng,
  //   that.mymap.getZoom()
  // ).x;
  // var Y = that.mymap.latLngToContainerPoint(
  //   e.latlng,
  //   that.mymap.getZoom()
  // ).y;
  var X = 50;
  var Y = 50;
  let URL = `/geoserver/cite/wms?SERVICE=WMS&VERSION=1.1.1&REQUEST=GetFeatureInfo&FORMAT=image/png&TRANSPARENT=true&QUERY_LAYERS=cite:tbilisi3&STYLES=&LAYERS=cite:tbilisi3&exceptions=application/vnd.ogc.se_inimage&INFO_FORMAT=text/html&FEATURE_COUNT=50&X=${X}&Y=${Y}&SRS=EPSG:4326&WIDTH=${WIDTH}&HEIGHT=${HEIGHT}&BBOX=${BBOX}`;

  console.log(URL);
  $.ajax({
    url: URL,
    datatype: "html",
    type: "GET",
    success: function (data) {
      console.log(data);
      // L.popup().setLatLng(e.latlng).setContent(data).openOn(that.mymap);
    },
  });
}

I have two problems:

• You can see the bbox contains all visible map, hence it makes request on larger region, how do I make this region smaller? e.g. when user clicks I only want info from a smaller region around the click, not whole visible map.

• This request works as it is now just there are many results due to bbox. But, if I uncomment X and Y and use them (instead of hardcoded values), the response doesn’t arrive anymore and I think I also get error about invalid point. What is wrong with my (commented) X and Y parameters?