I had a vector in my map with an image but ned to use gif instead static image so i exchanged o.layer.vector for ol.Overlay, it displays my gif but I can't get any way to add it to my layerSwitcher because overlay doesn't have title property, also with vector i could display some information using forEachFeaturePixel but now i cant. Is there any way to add my overlay to layerSwitcher and display information clicking on it?

This is what i had:

lastPoint = new ol.layer.Vector({
            source: new ol.source.Vector({
                features: [new ol.Feature(
                    new ol.geom.Point(
                        ol.proj.fromLonLat(lastCoordinates, map.getView().getProjection())
                    )
                )]
            }),
            visible: true,
            title: "Evento sísmico",
            style: new ol.style.Style({
                image: new ol.style.Icon({
                    anchor: [0.5, 0.5],
                    size: [30, 28],
                    offset: [0.2, 0.2],
                    scale: 1,
                    src: "assets/img/red-point.png"
                }),
            }),
        })
addEarthqPoint = (e, map, clickedCoordinate, date, time, depth, magnitude, overlayLayerEarthq) => {
    map.forEachFeatureAtPixel(e.pixel, () => {
        overlayLayerEarthq.setPosition(clickedCoordinate);
        overlayTitleEarthq.innerHTML = "Detalle de evento: "
        overlayFeatureDate.innerHTML = "Fecha: " + date;
        overlayFeatureTime.innerHTML = "Hora (UTC-5): " + time;
        overlayFeatureDepth.innerHTML = "Profundidad: " + depth + " km";
        overlayFeatureMagnitude.innerHTML = "Magnitud: M " + magnitude;
    }, {
        layerFilter: (layerCandidate) => {
            return layerCandidate.get("title") === "Evento sísmico";
        }
    });
}
mapClicked = (overlayLayer, overlayLayerEarthq) => {
    map.on("click", function (e) {
        const clickedCoordinate = e.coordinate;

        overlayLayer.setPosition(undefined);
        overlayLayerEarthq.setPosition(undefined);

        /* using preview values to use into function */
        addEarthqPoint(e, map, clickedCoordinate, lastDate, lastTime, lastDepth, lastMagnitude, overlayLayerEarthq);
    });
}

This is my new Overlay:

    lastPoint = new ol.Overlay({
        position: ol.proj.fromLonLat(lastCoordinates, map.getView().getProjection()),
        positioning: 'center-center',
        element: document.getElementById('new-gif'),
        stopEvent: false
    });

Or is there any better way to use a gif instead an image?