Correctly Display Leaflet Map on Ionic React

This issue persists on Ionic 6 and React Leftlet 4. To solve it, call the resize event when the page has finished rendering and animating.

import {
  IonPage,
  useIonViewDidEnter,
  ...
} from '@ionic/react';
 
const BuildingPermits: React.FC = () => {
  /**
   * Trigger a 'resize' event when Page has finished rendering and animating, so leaflet map can read a consistent height value.
   */
  useIonViewDidEnter(() => {
    window.dispatchEvent(new Event('resize'));
  });
 
  return (
    <IonPage>
      <MapContainer center={[51.505, -0.09]} zoom={13}>
        <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={[51.505, -0.09]}>
          <Popup>
            A pretty CSS3 popup. <br /> Easily customizable.
          </Popup>
        </Marker>
      </MapContainer>
    </IonPage>
  );
}