How to use the leaflet.LatLngBounds function in leaflet

mapUtils.registerHook(mapUtils.COMPUTE_BBOX_HOOK, (center, zoom) => {
            let latLngCenter = L.latLng([center.y, center.x]);
            // this call will use map internal size
            let topLeftPoint = this.map._getNewPixelOrigin(latLngCenter, zoom);
            let pixelBounds = new L.Bounds(topLeftPoint, topLeftPoint.add(this.map.getSize()));
            let southWest = this.map.unproject(pixelBounds.getBottomLeft(), zoom);
            let northEast = this.map.unproject(pixelBounds.getTopRight(), zoom);
            let bbox = new L.LatLngBounds(southWest, northEast).toBBoxString().split(',');
            return {
                bounds: {
                    minx: parseFloat(bbox[0]),
                    miny: parseFloat(bbox[1]),
                    maxx: parseFloat(bbox[2]),
                    maxy: parseFloat(bbox[3])
                },
                crs: 'EPSG:4326',
                rotation: 0
            };
        });
        mapUtils.registerHook(mapUtils.GET_PIXEL_FROM_COORDINATES_HOOK, (pos) => {

const RouteMap: React.FC = ({
  boundingBox,
  userViewport,
  selectedId,
  depot,
  visits,
  routes,
  clickHandler,
  removeHandler,
  updateViewport,
}) => {
  const bounds = boundingBox ? new L.LatLngBounds(boundingBox[0], boundingBox[1]) : undefined;
  // do not use bounds if user's viewport is dirty
  const mapBounds = userViewport.isDirty ? undefined : bounds;
  // @ts-ignore
  const tileLayerUrl = window.Cypress ? 'test-mode-empty-url' : 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
  return (
    <map is="" default="" style="{{">
      </map>

export function fromLatLngBounds (bounds: LatLngBounds) {
  // Don't change the original bounds object
  let b = new LatLngBounds()
  b.extend(bounds)

  if (b.getWest() < -180) {
    b = new LatLngBounds(
      new LatLng(b.getSouth(), -180),
      b.getNorthEast()
    )

    window.alert(message('antimeridian', ANTIMERIDIAN_WARNING))
  }

  if (b.getEast() > 180) {
    b = new LatLngBounds(
      new LatLng(b.getSouth(), 180),
      b.getNorthEast()
    )
    window.alert(message('antimeridian', ANTIMERIDIAN_WARNING))
  }

  const bboxString = b.toBBoxString()
  return {
    north: b.getNorth(),
    south: b.getSouth(),
    east: b.getEast(),
    west: b.getWest(),
    toString: () => bboxString
  }
}

updateBounds(updateImage, lastCenterPos) {
        var w = this.width;
        var h = this.height;
        var southWest = this.pointToLatLng(0, h);
        var northEast = this.pointToLatLng(w, 0);
        var bounds = new L.LatLngBounds(southWest, northEast);

        if (updateImage && this.imageOverlay) {
            this.imageOverlay.remove();
            this.imageOverlay = null;
        }

        if (this.imageOverlay) {
            this.imageOverlay.setBounds(bounds);
        } else {
            this.imageOverlay = L.imageOverlay(this.imageUrl, bounds).addTo(this.map);
        }
        var padding = 200 * maxZoom;
        southWest = this.pointToLatLng(-padding, h + padding);
        northEast = this.pointToLatLng(w+padding, -padding);
        var maxBounds = new L.LatLngBounds(southWest, northEast);
        this.map.setMaxBounds(maxBounds);

selector: 'app',
    template,
})
export class AppComponent extends ExampleAppComponentBlueprint {
    public crs = CRS.Simple;
    public properties: IExampleProperties = {
        duplex: [
            {name: 'zoom', value: 1, type: 'number' },
            {name: 'lat', value: -90, type: 'number' },
            {name: 'lng', value: 160, type: 'number' },
            {name: 'minZoom', value: 1, type: 'number' },
            {name: 'maxZoom', value: 4, type: 'number'},
            {
                name: 'maxBounds',
                type: 'latlngBounds',
                value: new LatLngBounds(latLng(-201.5, 0), latLng(0, 320)),
            },
        ],
        input: [],
        output: [],
    };
}

@NgModule({
    bootstrap:    [ AppComponent ],
    declarations: [ AppComponent ],
    imports:      [ BrowserModule, FormsModule, YagaModule, ExamplePropertiesModule ],
})
export class AppModule { }

document.addEventListener('DOMContentLoaded', () => {
    platform.bootstrapModule(AppModule);

export function getPlanesBounds(planes: PlanesState): Leaflet.LatLngBounds {
  const maxLat = planes.reduce(maximumReducer('lat'), -90);
  const minLat = planes.reduce(minimumReducer('lat'), 90);
  const maxLng = planes.reduce(maximumReducer('lon'), -180);
  const minLng = planes.reduce(minimumReducer('lon'), 180);
  const southWest = new Leaflet.LatLng(minLat, minLng);
  const northEast = new Leaflet.LatLng(maxLat, maxLng);
  return new Leaflet.LatLngBounds(southWest, northEast);
}

private centerMapToRoutePath = (routePath: IRoutePath) => {
        const bounds: L.LatLngBounds = new L.LatLngBounds([]);

        routePath!.routePathLinks.forEach(link => {
            link.geometry.forEach(pos => bounds.extend(pos));
        });

        this.props.mapStore!.setMapBounds(bounds);
    };

L.latLngBounds.fromBBoxArray = function (bbox) {
    return new L.LatLngBounds(
        new L.LatLng(bbox[1], bbox[0]),
        new L.LatLng(bbox[3], bbox[2])
    );
};

_drawShape: function(t) {
        this._shape ? this._shape.setBounds(new L.LatLngBounds(this._startLatLng, t)) : (this._shape = new L.Rectangle(new L.LatLngBounds(this._startLatLng, t), this.options.shapeOptions), this._map.addLayer(this._shape))
      },
      _fireCreatedEvent: function() {