Cross-Origin Read Blocking when trying to run a local tileserver map displayed using react-leaflet

Question

I cannot get react-leaflet to display a map from a local maptiler server. I can however get the following simple leaflet code displaying the maptiler map:

var mymap = L.map('mapid').setView([47.3769, 8.5417], 5);
L.tileLayer('http://172.17.0.6/styles/basic-preview/{z}/{x}/{y}.png', { 
        maxZoom: 18,
        attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, ' +
            'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
        id: 'mapbox/streets-v11',
        tileSize: 512,
        zoomOffset: -1
    }).addTo(mymap);

For the react-leaflet equivalent I have tried all the following urls and all of them just display an empty map

            <MapContainer id="mapid" center={[53.475, -113.4131]} zoom={10.22} scrollWheelZoom={true}>
              <TileLayer
                maxZoom={18}
                attribution={'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, ' +
                'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>'}
                id={'mapbox/streets-v11'}
                tileSize={512}
                zoomOffset={-1}
                // url='http://172.17.0.5/styles/basic-preview/#{z}/{x}/{y}.png' // nginx proxy
                // url={'http://localhost:8080/styles/basic-preview/#{z}/{x}/{y}.png'} // local
                url={'http://172.17.0.6/styles/basic-preview/#{z}/{x}/{y}.png'} // directly
              />
            </MapContainer>

I can however access any of these URLs directly without React or a leaflet script and they all work as intended.

In the case where I use nginx I simply proxy

    location ~* ^/styles/basic-preview/(.*)$ {
      add_header Access-Control-Allow-Origin "*";
      proxy_pass http://172.17.0.6/styles/basic-preview/$1;
    }

So the problem appears to be with react-leaflet. In the dev console all URLs give me a CORB warning:

Cross-Origin Read Blocking (CORB) blocked cross-origin response http://localhost:8080/styles/basic-preview/ with MIME type text/html. See https://www.chromestatus.com/feature/5629709824032768 for more details.

For the longest time I thought this was a CORS issue, hence the nginx with the header, and was confused since the headers in the response from tileserver do have Access-Control-Allow-Origin: * anyway.

I have tried using nginx to add a Cross-Origin-Resource-Policy: cross-origin with no success. I presume it needs to be added to the response header, which I am not sure how to accomplish using a containerized version of the maptiler/tileServer-gl.

I am also wondering if this is Red Herring since the docs do say:

In most cases, the blocked response should not affect the web page's behavior and the CORB error message can be safely ignored. ~ Source

I can also add crossOrigin={true} to the TileLayer component, which in the case of using the direct URL gets rid of the CORB warning. However, the issue remains and the map is gray. In the dev-tools network tab nothing is retrieved from the tileserver, but no errors anywhere either.

So is CORB blocking the request? Why do so when I use react as a frontend but not when I use vanilla JS?