I am trying to use react-leaflet with preact with little success. I do actually render the map but it is not rendered together, as in the tiles are scattered over the page and outside the containing element. I have read all (some) related questions on SO that say you need to either import the css file from leaflet (import "leaflet/dist/leaflet.css") or include a css file with a class for .leaflet-container. I have tried both and it is still not working. I followed the instruction on the react leaflet website to install the necessary dependencies. My project uses rollup so I added the following to my rollup config:

      alias({
        entries: [
          { find: 'react', replacement: 'preact/compat' },
          { find: 'react-dom', replacement: 'preact/compat' },
          { find: 'react-dom/test-utils', replacement: 'preact/test-utils' },
          { find: 'react/jsx-runtime', replacement: 'preact/jsx-runtime' }
        ]
      }),

And my component looks like this:

import { h } from 'preact';
import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';
import { Icon } from "leaflet";
import "../../styles/leaflet.css";

const Map = (): JSX.Element => {
  type LatLngTuple = [number, number];
  const position: LatLngTuple = [51.505, -0.09];

  return (

    <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>

  );
};

export default Map;