How to adapt WMS GetFeatureInfo ‘singleclick’ to use hover (‘pointermove’)

Using a piece of code from this OL example:

map.on('singleclick', function (evt) {
  document.getElementById('info').innerHTML = '';
  const viewResolution = /** @type {number} */ (view.getResolution());
  const url = wmsSource.getFeatureInfoUrl(
    evt.coordinate,
    viewResolution,
    'EPSG:3857',
    {'INFO_FORMAT': 'text/html'},
  );
  if (url) {
    fetch(url)
      .then((response) => response.text())
      .then((html) => {
        document.getElementById('info').innerHTML = html;
      });
  }
});

map.on('pointermove', function (evt) {
  if (evt.dragging) {
    return;
  }
  const data = wmsLayer.getData(evt.pixel);
  const hit = data && data[3] > 0; // transparent pixels have zero for data[3]
  map.getTargetElement().style.cursor = hit ? 'pointer' : '';
});

I am trying to get info from a single WMS layer (also multiple layers) on hover instead of using ‘singleclick’. Here it is the current code for this:

let layers;
let pixel;

map.on('pointermove', function (evt) {
  if (evt.dragging) {
    return;
  }
  //const data = ?????.getData(evt.pixel);
  //const hit = data && data[3] > 0; // transparent pixels have zero for data[3]
  //map.getTargetElement().style.cursor = hit ? 'pointer' : '';

  let pgPattern = "_pg";
  const layers = map.getAllLayers().filter(function (layer) {
    return layer.get('name');
  });
  const viewResolution = (view.getResolution());
  let url;
  let mygeojson;
  layers.forEach(function (layer, i, layers) {
    if (layer.getVisible() && layer.get('name').match(pgPattern)) {
      url = layer.getSource().getFeatureInfoUrl(
        evt.coordinate,
        viewResolution,
        'EPSG:4326',
        {'INFO_FORMAT': 'geojson'},
      );
    }
    if (url) {
      fetch(url)
      .then((response) => response.json())
      .then((mygeojson) => {
        if (mygeojson && mygeojson.features.length > 0) {
          const pixel = map.getEventPixel(evt.originalEvent);
          info.style.left = pixel[0] + 'px';
          info.style.top = pixel[1] + 'px';
          info.style.visibility = 'visible';
          info.innerText =
            "id_estacion: "+mygeojson.features[0].properties.id_estacion +"n"+
            "muestreo: "+mygeojson.features[0].properties.muestreo +"n"+
            "descripcion_abordo: "+mygeojson.features[0].properties.descripcion_abordo;
        }
      })
    }
  })
});

map.getTargetElement().addEventListener('pointerleave', function () {
  info.style.visibility = 'hidden';
});

I am stuck about how to solve the erratic behavior of the pointer after info is retrieved from the WMS layer (ie. hover on features of WMS layer).

How could I adapt the code to solve this? Here an image of the problem: