Leaflet renders Windy map when used via CDN but not via npm pakcage

I am using Leaflet with Windy in React via CDN which works fine:

in index.js:

<script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"></script>
<script src="https://api.windy.com/assets/map-forecast/libBoot.js"></script>

React component:

export const renderMap = (): void => {
    const options = {
        key: 'xyz',
        lat: 41.3,
        lon: 2.1,
        zoom: 10,
    };
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    (window as any).windyInit(options, (windyAPI: any) => {
        const { map } = windyAPI;
        // eslint-disable-next-line @typescript-eslint/no-explicit-any
        (window as any).L.popup()
            .setLatLng([41.3, 2.1])
            .setContent(':)')
            .openOn(map);
    });
};

However I want to be able to use the leaflet npm package, not the CDN. When I import the package, it is defined but Windy throws the error:

libBoot.js:3 Leaflet library is missing

in index.js:

<script src="https://api.windy.com/assets/map-forecast/libBoot.js"></script>

React component:

import L from 'leaflet';

export const renderMap = (): void => {
    console.log('L', L); // defined - object is present
    const options = {
        key: 'xyz',
        lat: 41.3,
        lon: 2.1,
        zoom: 10,
    };
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    (window as any).windyInit(options, (windyAPI: any) => {
        const { map } = windyAPI;
        L.popup()
            .setLatLng([41.3, 2.1])
            .setContent(':)')
            .openOn(map);
    });
};

There is very little information on setting this up online because Windy defers to Leaflet, and Leaflet defers to Windy. There is no information in the Leaflet quick start guide or in their github.

What is the correct way to make this work using the Leaflet npm package

from Leaflet renders Windy map when used via CDN but not via npm pakcage