extending js (maplibregl) library with new namesapce

Question

I want to create a new js library on top of maplibregljs.

My newLibrary.js

import maplibreGl from './lib/maplibre-gl.js'

class MyNewMap extends maplibreGl{

  //my custom constructor and features
}

My index.js

var myMap= new MyNewMap.Map({
//...
});

If I write the contents of both files together in one file then everything works as expected. But if I import them in the above sequence, i.e. newLibrary.js and index.js in my webpage, then I get an error Uncaught ReferenceError: MyNewMap is not defined at HTMLDocument.<anonymous> (index.html)

I tried bundling the newLibrary.js using esbuild --bundle --minify with formats iife,esm etc as well. Not sure how to handle it as I am not very familiar with js namespaces. Please help by giving clean ways to extend the Js library in order to build a new library on top of it.