I am trying to recreate the leaflet quick-start in combination with react. First, I followed the steps on https://leafletjs.com/examples/quick-start/. Next I set up the react app following https://react-leaflet.js.org/. My app.js looks like this::

import React from 'react';
import './App.css';
import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet'

function App() {
  return (

 <MapContainer center={[51.505, -0.09]} zoom={13} scrollWheelZoom={false} className="map">
      <TileLayer
        attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      />
      <Marker position={[51.505, -0.09]}>
        <Popup>
          A pretty CSS3 popup. <br /> Easily customizable.
        </Popup>
      </Marker>
    </MapContainer> 
);
}
export default App;

When I npm start the map loads as desired. It is displayed correctly. But every move on the map / refreshing the page is blocked by Firefox (Version 78.14.0esr), because the tiles are not loaded.

Why is Firefox preventing this or what am I doing wrong?