Google map tiles with leaflet on safari IOS won't load

Question

I have replaced openstreetmap tile layers with google's tile layer in my leaflet web app. It is working great on android ( every browser ) and on windows ( every browser ) but it does not work on IOS (tested in safari, firefox and chrome). Tiles refuses to load.

Here is a screenshot which i have made in the browsestack's console when testing.

Here are some more screenshots in the console

• Header
• Error

It is working with openstreetmap tiles

<TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />

If I copy this url https://www.google.com/maps/vt?lyrs=m@189&gl=cn&x=70&y=44&z=7 to safari, it works and loads that portion of the map.

I have tried to add &force=webgl to the URL which I tought will work but it did not. Here is the react leaflet code

const startPosition = [
  47.30903424774781, 19.682006835937504,
] as LatLngExpression;
const zoomLevel = 7;

<MapContainer
    className="h-full w-full relative"
    center={startPosition}
    zoom={zoomLevel}
    scrollWheelZoom={true}
>
       <TileLayer
           attribution="Google Maps"
           url="https://www.google.cn/maps/vt?lyrs=m@189&gl=cn&x={x}&y={y}&z={z}&force=webgl"
       />
</MapContainer>