added gml layer to openlayers does not appear on map

Question

I recently moved from using leaflet to using openlayers. For a new project I want to display the content of a gml file on a openlayers map. But whatever I have tried nothing gets visible on the map. When I print the content of the fetch response I see the string of the gml content being printed perfectly to the console however when I print the features variable after parsing the gml I end up with an empty array.

I have read the official documentation and written some javascript code according to the API discription.

I use a python request in django to obtain the text content of the gml and make it accessable for the front end javascript. When I log the fetch response to the console in dev tools I see that the string of the fetch response get's printed succesfully, however when I log the features variable to the console I end up with an empty array and nothing visible on the map.

The gml file that I try to add to the map can be found here: https://ruimtelijkeplannen.nl/documents/NL.IMRO.0252.GHbpkernMalden-VA01/NL.IMRO.0252.GHbpkernMalden-VA01.gml

My used javascript code:

import Map from '../../../node_modules/ol/Map.js';
import OSM from '../../../node_modules/ol/source/OSM.js';
import TileLayer from '../../../node_modules/ol/layer/Tile.js';
import View from '../../../node_modules/ol/View.js';
import GML32 from '../../../node_modules/ol/format/GML32.js';

const map = new Map({
  target: 'map',
  layers: [
    new TileLayer({
      source: new OSM(),
    }),
  ],
  view: new View({
    center: [0, 0],
    zoom: 2,
  }),
});

function createDefaultStyle() {
  return new Style({
    fill: new Fill({
      color: 'rgba(169,169,169,0.5)'
    })
    // Add more style properties as needed
  });
}

document.getElementById('test').addEventListener('click', function() {
  fetch('/bestemmingsplan/')
    .then(response => {
        if (!response.ok) {
            throw new Error('Network response was not ok');
        }
        return response.text();
    })
    .then(content => {
        console.log(content);
        var gmlFormat = new GML32();
        var features = gmlFormat.readFeatures(content,{
          dataProjection: 'EPSG:28992',
          featureProjection: 'EPSG:3857'
        });

        if (features.length > 0) {
          var layer = new VectorLayer({
            source: new VectorSource({
              features: features
            }),
            style: createDefaultStyle()
          });
          map.addLayer(layer);
        } else {
          console.warn('No features found in the GML data.');
        }
    })
    .catch(error => {
        console.error('There was a problem with the request:', error);
    });
});

Could someone tell me what I do wrong and help me out?