OpenLayers vector tiles selection not working properly

I want to be able to select the features from a Vector tile layer like in this example - https://openlayers.org/en/latest/examples/vector-tile-selection.html (edit: their tile layer seems to be broken, but it worked fine few days ago). I have a tile layer on Geoserver in the EPSG:3765. Here is my OpenLayers configuration:

// Match the server resolutions
const maxResolution = 3862.66;
let defaultResolutions = [];
defaultResolutions.length = 17;
for (let i = 0; i < defaultResolutions.length; ++i) {
  defaultResolutions[i] = maxResolution / Math.pow(2, i + 1);
}

let tileGrid = new TileGrid({
  extent: [247020.5267134084, 4688936.351599621, 741441.9826338722, 5160175.80631312],
  tileSize: 256,
  resolutions: defaultResolutions,
  hidpi:false,
});

// Create new OpenLayers projection for EPSG:3765
let vtLayer = new VectorTileLayer({
  source: new VectorTileSource({
    declutter: true,
    tilePixelRatio: 1, // oversampling when > 1
    tileGrid: tileGrid,
    format: new MVT({
      defaultDataProjection: 'EPSG:3765',
     }),
    projection: 'EPSG:3765',
    url: 'https://dev.li-st.net/geoserver/gwc/service/tms/1.0.0/' + layer_vt_test + '@EPSG%3A'+projection_epsg_no+'@pbf/{z}/{x}/{-y}.pbf',
    //maxZoom: 19,
    //minZoom: 12,
    //maxResolution: 3862.66,
    //wrapX: false,
  })
})

// Selection
const selectionLayer = new VectorTileLayer({
  map: map,
  renderMode: 'vector',
  source: vtLayer.getSource(),
  style: function (feature) {
    if (feature.getId() in selection) {
      return selectedCountry;
    }
  },
});

where layer_vt_test is a layer name and projection_epsg_no is the EPSG number, stored in variables. When I try the code from the OpenLayers example i get the following error: Uncaught TypeError: zg.getFeatures is not a function.

This is where the code breaks (I think) when following the example:

map.on(['click', 'pointermove'], function (event) {
  if (
    (selectElement.value === 'singleselect-hover' &&
      event.type !== 'pointermove') ||
    (selectElement.value !== 'singleselect-hover' &&
      event.type === 'pointermove')
  ) {
    return;
  }
  vtLayer.getFeatures(event.pixel).then(function (features) {
    if (!features.length) {
      selection = {};
      selectionLayer.changed();
      return;
    }
    const feature = features[0];
    if (!feature) {
      return;
    }
    const fid = feature.getId();

    if (selectElement.value.indexOf('singleselect') === 0) {
      selection = {};
    }
    // add selected feature to lookup
    selection[fid] = feature;

    selectionLayer.changed();
  });
});

My map is re-projected because I can visualize the layers and everything is in place, but when I want to make the layer selectable (on click, hover or anything, it doesn't matter) it doesn't work. The grid set on the Geoserver (EPSG3765) is created and assigned to the Tile layer.

Am I doing something wrong? I don't see that getFeatures() is a function that is imported in the example?

I can provide more details and the configuration of the layer in Geoserver if necessary!

Any tip would be great cause I'm out of options.

The example in the question was using the latest version of OL ("6.7.0"). I'm using "^5.1.2" and had to follow this example. It's using getFeaturesAtPixel(event.pixel) instead of getFeatures(event.pixel).