Calculate the XYZ tile grid given an extent and resolution for a MapGuide server using OpenLayers

Question

I'm trying to add a tiled map from MapGuide to my OL map. However, with my current code, the X and Y values in the request call are incorrect. I have tried specifying the tile grid with resolutions and extents, but it seems to have no effect. I have also considered using WMTS with a WMTS grid, but given the structure of the call I need to make, it doesn't seem to be supported. How can I transform the tileCoord that Open Layers is generating to the ones I need to request?

This is my current code:

import Map from 'ol/Map.js';
import TileLayer from 'ol/layer/Tile.js';
import View from 'ol/View.js';
import {getTopLeft} from 'ol/extent.js';
import proj4 from 'proj4';
import { register } from 'ol/proj/proj4';
import OSM from 'ol/source/OSM';
import TileGrid from 'ol/tilegrid/TileGrid.js';
import XYZ from 'ol/source/XYZ.js'; 
proj4.defs('EPSG:25831', '+proj=utm +zone=31 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs');
register(proj4);


// Define projection extent
var projectionExtent = [494035.69730822, 4676149.38116713, 502474.0732031, 4682213.46977595]; 
var resolutions = [
  50000, 40000, 30000, 25000, 20000, 17500, 15000, 12000, 10000, 9000, 8000,
  7000, 6000, 5000, 4500, 4000, 3500, 3000, 2500, 2000, 1500, 1000, 900, 800,
  700, 600, 550, 500, 450, 400, 350, 300, 250, 200, 150, 100
];

// Function to build custom tile URL
function buildTileURL() {
  let url
  url='https://wgis.test123.org/mapguide/mapagent/mapagent.fcgi?mapdefinition= ...  other parameters .... &version=1.2.0&tilecol={x}&tilerow={y}&scaleindex={z}';  // Assuming scaleindex corresponds to the zoom level
  console.log(url)
  return url
}

// XYZ source with custom URL function
var mapGuideSource = new XYZ({
  tileUrlFunction: function(tileCoord) {
    if (tileCoord) {
      console.log(tileCoord)
      return buildTileURL()
        .replace('{x}', tileCoord[1].toString())
        .replace('{y}', tileCoord[2].toString())
        .replace('{z}', tileCoord[0].toString());
    }
    return undefined;
  },
  projection: 'EPSG:25831',
});

const tileGrid = new TileGrid({
  extent: projectionExtent,
  resolutions: resolutions,
  tileSize: [300, 300],
  origin: getTopLeft(projectionExtent)
});


// Create the map layer
var mapGuideLayer = new TileLayer({
  source: mapGuideSource,
  tileGrid: tileGrid,
  extent: projectionExtent,
});

export const osmLayer = new TileLayer({
  source: new OSM(),
});

// Create the map
var map = new Map({
  target: 'map',
  layers: [mapGuideLayer,osmLayer],
  view: new View({
    projection: 'EPSG:25831',
    center: [498254.88525566, 4679681.39547154], 
    zoom: 12
  })
});