Having issue with vectorBaseMapLayer

Promise.all error:TypeError: L.esri.Vector.vectorBasemapLayer is not a function with LWC

my code shown below

import { LightningElement, api, track, wire } from 'lwc';
import { getRecord } from 'lightning/uiRecordApi';
import {loadScript, loadStyle} from 'lightning/platformResourceLoader';

//Create API key using your ArcGIS Developer account developers.arcgis.com
const apiKey = "AAPK7d26ac81e074448c87dada5c283f0d0flXzs5pSuaVFJXxUOkIingEF0nQ80Q3dmKuYDfwezrifW0UoMUH3SJJeU6SiCcCL_";

const FIELDS = [
'Account.Billing_Address_Latitude__c',
'Account.BillingLongitude__c'];

const DefaultLat = 35.7796;
const DefaultLong = -78.6382;

export default class ESRIMapDemo extends LightningElement {
leafletInitialzed = false;

renderedCallback(){

this.loadLeaflet();
this.leafletInitialzed = true;
}

loadLeaflet(){
const promise1 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve(loadScript(this, 'https://unpkg.com/esri-leaflet@3.0.2/dist/esri-leaflet.js'));
}, 100);
});
const promise2 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve(loadScript(this, 'https://unpkg.com/esri-leaflet-geocoder@3.1.1/dist/esri-leaflet-geocoder.js'));
}, 200);
});
const promise3 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve(loadScript(this, 'https://unpkg.com/esri-leaflet-vector@4.0.1/dist/esri-leaflet-vector.js'));
}, 200);
});
Promise.all([
loadStyle(this, 'https://unpkg.com/leaflet@1.7.1/dist/leaflet.css'),
loadScript(this, 'https://unpkg.com/leaflet@1.7.1/dist/leaflet.js'),
promise1,
promise2,
promise3,
loadStyle(this, 'https://unpkg.com/esri-leaflet-geocoder@3.1.1/dist/esri-leaflet-geocoder.css'),
])
.then(() => {
this.initializeMap();
}).catch(error => {
console.log('Promise.all error:' + error);
});
}

initializeMap(){
//var map = L.map(this.template.querySelector(".map-root")).setView([39.7392, -104.991531], 14);
var map = L.map(this.template.querySelector(".map-root")).setView([37.837, -122.479], 8);

console.log('vector====',L.esri.Vector.vectorBasemapLayer);

const vectorTiles = {};
const allEnums = [
"ArcGIS:Imagery",
"ArcGIS:Imagery:Standard",
"ArcGIS:Imagery:Labels",
"ArcGIS:LightGray"];
vectorTiles.Default = L.esri.Vector.vectorBasemapLayer(null, {
apiKey
});

allEnums.forEach((enumString) => {
vectorTiles[enumString] = L.esri.Vector.vectorBasemapLayer(enumString, {
apiKey
});
});

L.control.layers(vectorTiles, null, {
collapsed: false
})
.addTo(map);

vectorTiles.Default.addTo(map);

}

}