React-leaflet not showing popup

[groosterm]

I am using react-leaflet for a project I’m working on, and on their quickstart guide there is a popup. However, in my example the popup won’t show up, and I’m having trouble understanding why. This is my code (I put it all to include dependencies):

import { useCallback, useEffect, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { fetchCoordinates } from "../../redux/slices/coordinates.slice";
import "leaflet/dist/leaflet.css";
import "leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.webpack.css";
import "leaflet-defaulticon-compatibility";

import { MapContainer, TileLayer, GeoJSON, Popup } from "react-leaflet";

import MarkerClusterGroup from "react-leaflet-markercluster";

const Map = () => {
  const coordinates = useSelector((state) => state.coordinates.coordinates)[0]; // coordinates come from Redux slice, refer to Redux folder
  const isLoading = useSelector((state) => state.loading);
  const dispatch = useDispatch();

  const initFetch = useCallback(() => {
    dispatch(fetchCoordinates());
  }, [dispatch]);

  useEffect(() => {
    initFetch();
    navigator.geolocation.getCurrentPosition(function (position) {
      setPosition([position.coords.latitude, position.coords.longitude]);
    });
  }, [initFetch]);

  const [position, setPosition] = useState([]);

  return isLoading ? (
    <div>I'm loading</div>
  ) : (
    position[0] != null && position[1] != null && (
      <MapContainer style={{ height: "100vh" }} center={position} zoom={13}>
        <TileLayer
          url="https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}"
          accessToken="pk.eyJ1IjoiZ2l1bGlvbWFyaW9tYXJ0ZW5hIiwiYSI6ImNrdWNtOWp0bTEyNWMyb21vaG4wOTQ3azAifQ.ppikM0e7Ny-1iZtrIxXa1g"
          id="mapbox/streets-v11"
        />
        <MarkerClusterGroup>
          {coordinates &&
            coordinates.map((coordinate) => (
              <GeoJSON
                data={coordinate.geolocation}
                key={coordinates.indexOf(coordinate)}
              >
                <Popup>Hello world</Popup>
              </GeoJSON>
            ))}
        </MarkerClusterGroup>
      </MapContainer>
    )
  );
};

export default Map;

Does anybody know what I’m doing wrong or what should I try?