映射数组时不能在 <Marker> 中使用 <Popup/> [React Leaflet]

Question

我正在尝试映射一个数组，其中我使用了 React Leaflet 中的标记组件。如果我只使用 Marker 组件一切正常，但如果在标记组件内部我使用 Popup 组件，我会收到此错误。

类型错误：无法读取未定义的属性“初始化”

const Location = () => {
  const [shops, setShops] = useState([]);

  useEffect(() => {
    const fetchShops = async () => {
      const fetchedShops = await getShops();
      console.log(fetchedShops);
      setShops(fetchedShops);
    };
    fetchShops();
  }, []);

  return (
    <MapContainer
      center={[27.8617, -101.1255]}
      zoom={15}
      scrollWheelZoom={true}
      style={{ height: "100vh" }}
      zoomAnimation={true}
    >
      <TileLayer
        attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      />

      {shops?.map((shop) => (
        <Marker position={shop?.location}>
          // If i remove this all work fine
          <Popup>Hola mundo</Popup>
        </Marker>
      ))}
    </MapContainer>
  );
};