I have a problem with Leaflet in my React project.

Map is perfectly loading on Google Chrome, on the other hand, on Safari, I can see only a pin and a gray background.

Do you know how to solve this issue?

import React from "react";
import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet";
import L, { LatLngTuple } from "leaflet";

const MapComponent: React.FC = () => {
    const position: LatLngTuple = [50.89302149031785, 15.681996040720703]; // Lokalizacja restauracji

    return (
        <MapContainer
            center={position}
            zoom={12.2}
            style={{
                height: "200px",
                width: "100%",
                borderRadius: "20px",
            }}
        >
            <TileLayer
                url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
                attribution='© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
            />
            <Marker position={position}>
                <Popup>Restauracja Goduszyn </Popup>
            </Marker>
        </MapContainer>
    );
};

export default MapComponent;