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_Latitudec', 'Account.BillingLongitudec'];

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);

}

}

Esri / systems-integrations

Having issue with vectorBaseMapLayer #1