gatsby-plugin-react-leaflet with gatsby v3 - build error

I can't find any information wether the gatsby-plugin-react-leaflet (made for gatsby v2) is compatible with gatsby v3 or not, nor can I find any info on the build errors I get. I have tried everything ie checking if the window is defined, useHasMounted etc and nothing works. Seems to be something with this version of the plugin for gatsby. Any info would be great.

I get these errors when trying to build:

This is my the full code, if I remove the MapContainer and everything in it, Gatsby builds without problem.

import { Link, Icon } from "@myCompany/components";
import L from "leaflet";
import PropTypes from "prop-types";
import React, { useEffect, useState } from "react";
import { MapContainer, Marker, TileLayer } from "react-leaflet";
import { useFetch } from "use-http";

import pin from "../images/pin.svg";

import * as defaultStyles from "./Map.module.css";

Map.propTypes = {
  styles: PropTypes.objectOf(PropTypes.string),
  address: PropTypes.string,
  street: PropTypes.string,
  zip: PropTypes.string,
  city: PropTypes.string,
};

export default function Map({
  styles = defaultStyles,
  address,
  street,
  zip,
  city,
}) {
  const [coordinates, setCoordinates] = useState([0, 0]);
  const [loading, setLoading] = useState(true);
  const { get, error } = useFetch(
    `https://nominatim.openstreetmap.org/search?q=${address}&format=json`,
  );

  const getCoordinates = async () => {
    const response = await get();
    if (response && response.length) {
      const { lat, lon } = response[0];
      setCoordinates([Number(lat), Number(lon)]);
      setLoading(false);
    }
  };

  useEffect(() => {
    getCoordinates();
  }, []);

  if (loading) {
    return null;
  }

  if (error) {
    return null;
  }

  if (typeof window !== "undefined") {
    const pinIcon = new L.Icon({ iconUrl: pin, iconSize: new L.Point(32, 38) });
    return (
      <div className={styles.component}>
        <MapContainer
          center={coordinates}
          zoom={17}
          className={styles.map}
          zoomControl={false}
          attributionControl={false}
        >
          <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
          <Marker
            position={coordinates}
            className={styles.marker}
            icon={pinIcon}
          />
        </MapContainer>
        <Link
          to={`https://www.google.com/maps/search/?api=1&query=${street}, ${zip} ${city}}`}
          target="_blank"
          showExternalIcon={false}
          className={styles.link}
        >
          <Icon name="map" />
        </Link>
      </div>
    );
  }
  return null;
}