WMTS Service Not Accessible

[KCCGIS_Team]

I am trying to add the OS open basemap https://api.os.uk/maps/raster/v1/wmts to my web application, written in the javascript API.
I can view the capabilities of the service in a browser and I have added it to ArcMap (using a valid api key) without any problem, but when I try to set it as the initial basemap of my web application it doesn't load, although no errors are reported.
If I then try to select it from the Basemap Gallery, I see this message:

"esri.dijit.BasemapGallery: service not accessible."

I can't work out why this is happening or what I need to do to fix it, any suggestions would be welcome.
I have included some of my code to show what I am doing.

Instantiate the map:

_map = new Map("uxMapContentPaneDiv", {
logo: false,
navigationMode: "css-transforms",
autoResize: false,
extent: new Extent({ "xmin": 537000, "ymin": 150000, "xmax": 645000, "ymax": 176000, "spatialReference": { "wkid": 27700 } }),
showAttribution: true,
showInfoWindowOnClick: true,
slider: true,
sliderPosition: "top-right",
sliderStyle: "small"
});

Instantiate the WMTS service:

var layer;

require(["dojo/on", "dojo/_base/lang", "esri/layers/WMTSLayer", "esri/layers/WMTSLayerInfo", "esri/layers/TileInfo", "esri/SpatialReference"],
function (on, lang, WMTSLayer, WMTSLayerInfo, TileInfo, SpatialReference) {

var tileInfo = new TileInfo({
"dpi": 96,
"format": "png",
"compressionQuality": 0,
"spatialReference": new SpatialReference({ "wkid": 27700 }),
"origin": {
"x": -5220400.0,
"y": 4470200.0
},
"lods": [{
"level": "EPSG:27700:0",
"resolution": 169.33367200067735,
"scale": 640000
},
{
"level": "EPSG:27700:1",
"resolution": 84.66683600033868,
"scale": 320000
},
{
"level": "EPSG:27700:2",
"resolution": 42.33341800016934,
"scale": 160000
},
{
"level": "EPSG:27700:3",
"resolution": 21.16670900008467,
"scale": 80000
},
{
"level": "EPSG:27700:4",
"resolution": 10.583354500042335,
"scale": 40000
},
{
"level": "EPSG:27700:5",
"resolution": 5.291677250021167,
"scale": 20000
},
{
"level": "EPSG:27700:6",
"resolution": 2.6458386250105836,
"scale": 10000
},
{
"level": "EPSG:27700:7",
"resolution": 1.3229193125052918,
"scale": 5000
},
{
"level": "EPSG:27700:8",
"resolution": 0.6614596562526459,
"scale": 2500
},
{
"level": "EPSG:27700:9",
"resolution": 0.33072982812632296,
"scale": 1250
},
{
"level": "EPSG:27700:10",
"resolution": 0.19843789687579377,
"scale": 750
}]
});

var layerInfo = new WMTSLayerInfo({
tileInfo: tileInfo,
identifier: "Leisure_27700",
fullExtent: new Extent({ "xmin": 537000, "ymin": 150000, "xmax": 645000, "ymax": 176000, "spatialReference": { "wkid": 27700 } }),
initialExtent: new Extent({ "xmin": 537000, "ymin": 150000, "xmax": 645000, "ymax": 176000, "spatialReference": { "wkid": 27700 } }),
tileMatrixSet: "EPSG:27700",
format: "png"
});

var options = {
serviceMode: "RESTful",
copyright: "Ordnance Survey",
layerInfo: layerInfo,
visible: true,
visibleAtMapScale: true,
customParameters: { activeLayer: { id: "Leisure_27700" } }
};

layer = new WMTSLayer("https://api.os.uk/maps/raster/v1/wmts?key=AAAAAAAAAAAAAAAAAAAAAAA&request=getcapabilities&service=WM...", options);
layer.spatialReference = new SpatialReference({ "wkid": 27700 });
layer.title = "OS Colour Leisure";
layer.initialExtent = new Extent({ "xmin": 537000, "ymin": 150000, "xmax": 645000, "ymax": 176000, "spatialReference": { "wkid": 27700 } });

if (layer !== null && layer !== undefined) {
_map.addLayer(layer);
}
});

Instantiate the Basemap Gallery:

require(["dojo/on",
"dojo/_base/lang",
"esri/dijit/BasemapGallery",
"esri/dijit/BasemapLayer",
"esri/dijit/Basemap",
"dojo/_base/array",
"dojo/ready"],
function (on, lang, BasemapGallery, BasemapLayer, Basemap, array, ready) {
ready(function () {
var basemapList = [];
const g_basemapLayers = ["_osColour", "_osGreyScale", "Leisure_27700"];

array.forEach(g_basemapLayers, function (baseMapId) {
switch (baseMapId) {
case "_osColour":
var _osColour = new BasemapLayer({ url: "https://myServer/server/rest/services/BASEMAPS/OS_Colour/MapServer", opacity: 0.9 });
var colourBasemap = new Basemap({ id: baseMapId, layers: [_osColour], title: "Colour", thumbnailUrl: "/images/streets.jpg" });
basemapList.push(colourBasemap);
break;
case "_osGreyScale":
var _osGreyScale = new BasemapLayer({ url: "https://myServer/server/rest/services/BASEMAPS/OS_Grey/MapServer", opacity: 0.9 });
var greyscaleBasemap = new Basemap({ id: baseMapId, layers: [_osGreyScale], title: "Black and White", thumbnailUrl: "/images/greyscale.jpg" });
basemapList.push(greyscaleBasemap);
break;
case "Leisure_27700":
var _leisure27700 = new BasemapLayer({ url: "https://api.os.uk/maps/raster/v1/wmts?key=AAAAAAAAAAAAAAAAAAAAAAA&request=getcapabilities&service=WM...", opacity: 0.9 });
var leisure27700Basemap = new Basemap({ id: baseMapId, layers: [_leisure27700], title: "OS Colour", thumbnailUrl: "/images/streets.jpg" });
basemapList.push(leisure27700Basemap);
break;
}
});

var _basemapGallery = new BasemapGallery({ showArcGISBasemaps: false, map: _map, basemaps: basemapList }, "uxBasemapGallery");
_basemapGallery.startup();
_basemapGallery.select(selectedLayer);
});
});