react-leaflet CDN issue

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

    <style>
      #root {
          height: 500px;
          width: 100%;
      }

      .leaflet-container {
          width: 100%;
          height: 100%;
      }
    </style>
  </head>
  <body>
    <div id="root"></div>

<script type="text/babel" data-type="module">
  import React from "https://esm.sh/react@19/?dev"
  import ReactDOMClient from "https://esm.sh/react-dom@19/client?dev"
  import {
    MapContainer,
    TileLayer,
    Marker,
    Popup,
  } from 'https://cdn.esm.sh/react-leaflet@5.0.0'
  const rootElement = ReactDOMClient.createRoot(document.getElementById('root'));
  const position = [51.505, -0.09]
  rootElement.render(
<MapContainer center={position} zoom={13} scrollWheelZoom={false}>
    <TileLayer
      attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
      url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
    />
    <Marker position={position}>
      <Popup>
        A pretty CSS3 popup. <br /> Easily customizable.
      </Popup>
    </Marker>
</MapContainer>,);
</script>
  </body>
</html>