Implementing WFS in OpenLayers 10.x

Question

I'm relatively new to OpenLayers, and am struggling to get a WFS we serve to draw properly on my map. I have ImageWMS layers drawing successfully, but I was hoping to use a WFS, to then enable me to Zoom the map to the extent of Points selected with a filter to the WFS.

Below is the code I have, based on the OpenLayers examples (I've included an ID value which returns points in southern Ontario). The error I get is in ol.js:

Uncaught TypeError: t.getLayerStatesArray is not a function

I've searched for answers, but have not successfully figured out the issue. The WFS is publicly available, and is based on a virtual layer generated using Mapserver 8.x and GDAL/OGR sourced from a SQL Server table.

My ideal solution would be to add the points to the map, and then zoom the map to the extent of the points returning from the WFS. Currently, my WMS layer returns a map at full extent, as the GDAL/OGR virtual WMS layer does not limit the BBOX to the extent of the points, but rather to the default extent of the Mapserver layer.

var intStudyID = 764;

const LayerBackgroundCBMT = new ol.layer.Image({
    extent: [-141, 41, -52, 84],
    source: new ol.source.ImageWMS({
        url: 'https://maps.geogratis.gc.ca/wms/CBMT',
        params: { 'LAYERS': 'CBMT' },
        projection: 'EPSG:4326',
        ratio: 1,
        serverType: 'mapserver',
    }),
});

const LayerwmsCABINStudy = new ol.layer.Image({
    extent: [-141, 42, -52, 84],
    source: new ol.source.ImageWMS({
        url: 'https://cabin-rcba.ec.gc.ca/cabin/cabin_ows.asp',
        params: { 'LAYERS': 'cabinstudy', 'intStudyID': intPassedStudyID },
        projection: 'EPSG:4326',
        ratio: 1,
        serverType: 'mapserver',
    }),
});
    
const vectorSource = new ol.source.Vector({
  format: new ol.format.WFS(),
  url: function (extent) {
    return (
    'https://cabin-rcba.ec.gc.ca/cabin/cabin_ows.asp?' +
    'service=WFS&' +
      'version=1.1.0&request=GetFeature&typename=cabinstudy&' +
      'intStudyID=' + intPassedStudyID +
      'srsname=EPSG:4326&' +
      'bbox=' +
      extent.join(',') +
      ',EPSG:4326'
    );
  },
  strategy: ol.loadingstrategy.bboxStrategy,
});

const vector = new ol.renderer.canvas.VectorLayer({
  source: vectorSource,
  style: {
    'stroke-width': 0.75,
    'stroke-color': 'white',
    'fill-color': 'rgba(100,100,100,0.25)',
  },
});

const layers = [LayerBackgroundCBMT, LayerwmsCABINStudy, vector];

const map = new ol.Map({
    layers: layers,
    target: 'map',
    view: new ol.View({
        projection: 'EPSG:4326',
        center: [-96, 49],
        zoom: 3,
    }),
});