How to update params properly for imageWMS

Question

I have 2 main function on my project, 1 to display information, vectors,layers, etc when page loads and another one to display information depending what the user want to see. I am calling geoserver to display geotiff as imageWMS , also i am displaying band values from this geotiff on geoserver using this function showBand:

eventRaster = (f) => {
    rasterWMS = new ol.source.ImageWMS({
        url: 'https://url/geoserver/name/wms',
        params: {
            'LAYERS': 'name:' + f
        },
        ratio: 1,
        serverType: 'geoserver'
    })
    return rasterWMS;
}

showBand = (map, vista, eventRaster) => {
    map.on('singleclick', function (evt) {
        /* document.querySelector('featureInfo > tr').classList.add("test") */
        const viewResolution = /** @type {number} */ (vista.getResolution());
        const url = eventRaster.getFeatureInfoUrl(
            evt.coordinate,
            viewResolution,
            'EPSG:3857',
            { 'INFO_FORMAT': 'text/html' }
        );
        if (url) {
            fetch(url)
                .then((response) => response.text())
                .then((html) => {
                    document.getElementById('showBand').innerHTML = html;
                    const pga = document.querySelector(".featureInfo tbody tr:nth-child(2) td:nth-child(2)").textContent;
                    const floatPga = parseFloat(pga).toFixed(2);
                    if (floatPga < 0) {
                        document.getElementById('showBand').innerHTML = "Da click en la una zona válida";
                    } else {
                        document.getElementById('showBand').innerHTML = floatPga + " gal";
                    }
                });
        }
    });

    map.on('pointermove', function (evt) {
        if (evt.dragging) {
            return;
        }
        const pixel = map.getEventPixel(evt.originalEvent);
        const hit = map.forEachLayerAtPixel(pixel, function () {
            return true;
        });
        /* map.getTargetElement().style.cursor = hit ? 'pointer' : ''; */
    });

}

So i have this on my functions:

firstLoad(){
  const f = sometiffname;
  lastTiffRaster = new ol.layer.Image({
        title: 'PGA(gal)',
        source: eventRaster(f),
    });
   map.addLayer(lastTiffRaster);
}

selected(){
  const f = sometiffname;
  map.removeLayer(lastTiffRaster);
  map.removeLayer(eventTiff);

  rasterWMS.updateParams({
        'LAYERS': 'name:'+f,
    });

  evetTiff = new ol.layer.Image({
        title: 'PGA(gal)',
        source: eventRaster(f),
    });
  map.addLayer(eventTiff);
}

There is not problem when page loads for first time and click the first event i want to see because params update perfectly, and i can see band values without problems, but when i try to call another event (the second one), geotiff changes, but params does not update. i print on console f to see whats the value and it changes per event but i dont know why updateParams doesnt work on this situation.

yellow marker is f

Answer 1

I had to create a new imagewms for selected() then update imagewms from firstload()

selected(){
  const f = sometiffname;
  const newRasterWMS = new ol.source.ImageWMS({
        url: 'https://url.pe/geoserver/somename/wms',
        params: {
            'LAYERS': 'somename:' + f
        },
        ratio: 1,
        serverType: 'geoserver'
    });

    rasterWMS.updateParams({
        'LAYERS': 'somename:'+f,
    });

    eventTiff = new ol.layer.Image({
        title: 'PGA(gal)',
        source: newRasterWMS
    });
   map.addLayer(lastTiffRaster);
}