react-leaflet: even the simplest code doesn't show up anything

I'm trying to figure out how to render leaflet map with react-leaflet, because I'm getting no output as you can see here:

This is the code:

import * as React from 'react';

import * as leaflet from 'leaflet'
import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet'

// https://gist.github.com/simon04/3b89aa6ca858c72110bb80dd13b4f941

// https://github.com/Leaflet/Leaflet/issues/4849

import "leaflet/dist/leaflet.css"
//import "./leaflet.css"
import "leaflet/dist/images/marker-shadow.png"

//leaflet.Icon.Default.mergeOptions({
    //iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
    //iconUrl: require('leaflet/dist/images/marker-icon.png'),
    //shadowUrl: require('leaflet/dist/images/marker-shadow.png')
//});


import Box from '@mui/material/Box'

export default function Mapping(props) {

  // https://stackoverflow.com/questions/70722036/react-leaflet-even-the-simplest-code-doesnt-show-up-anything

  // https://stackoverflow.com/questions/70618361/react-leaflet-cant-input-marker-position-from-fetching-api

  // https://stackoverflow.com/questions/40365440/react-leaflet-map-not-correctly-displayed?rq=1


  const [mapState, setMapState] = React.useState(
    {
      lat: 41.257017,
      lng: 29.077524,
      zoom: 13,
    }
  )

  return (
    <div>
      <h3>Map</h3>

      <Box sx={{ minWidth: 120 }}>

        <MapContainer
          center={[51.505, -0.09]}
          zoom={13}
          scrollWheelZoom={false}
          style={{ height: '100vh', width: '100wh' }}
        >
          <TileLayer
            attribution='&copy; <a href="https://www.openstreetmap.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>


      </Box>


    </div>
  )
}

As suggested here I added the following rules in webpack.config.js :

    {
      test: /\.(png|jpe?g|gif)$/i,
      use: [
        {
          loader: "file-loader",
          options: {
            name: "[path]/[name].[ext]",
          },
        },
      ],
    },
  ]
},

And, actually, no error messages about css files.

Adding

<style>
  .leaflet-container {
    height: 400px;
    width: 800px;
   }
 </style>

to index.html I get this output:

which is something closer to the output I should expect https://react-leaflet.js.org/docs/start-setup/ :

Putting <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> at the bottom of the body part of index.html , I get this:

SOLVED:

After removing the proxy configuration, removing the a link in the index.html and updating the map.tsx as follows:

import * as React from 'react';

import * as leaflet from 'leaflet'
import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet'

// https://gist.github.com/simon04/3b89aa6ca858c72110bb80dd13b4f941

// https://github.com/Leaflet/Leaflet/issues/4849

import "leaflet/dist/leaflet.css"
import "leaflet/dist/images/marker-shadow.png"

//Leaflet.Icon.Default.mergeOptions({
    //iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
    //iconUrl: require('leaflet/dist/images/marker-icon.png'),
    //shadowUrl: require('leaflet/dist/images/marker-shadow.png')
//});


import Box from '@mui/material/Box'

export default function Mapping(props) {

  // https://stackoverflow.com/questions/70722036/react-leaflet-even-the-simplest-code-doesnt-show-up-anything

  // https://stackoverflow.com/questions/70618361/react-leaflet-cant-input-marker-position-from-fetching-api

  // https://stackoverflow.com/questions/40365440/react-leaflet-map-not-correctly-displayed?rq=1


  const [mapState, setMapState] = React.useState(
    {
      lat: 41.257017,
      lng: 29.077524,
      zoom: 13,
    }
  )

  return (
    <div>
      <h3>Map</h3>

      <div id="map">

        <MapContainer
          center={[51.505, -0.09]}
          zoom={13}
          scrollWheelZoom={false}
          style={{ height: '100vh', width: '100wh' }}
        >

        <TileLayer
          attribution='&copy; <a href="https://www.openstreetmap.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>


      </div>


    </div>
  )
}

the leaflet map finally appears:

"@types/leaflet": "^1.7.8"
"leaflet": "^1.7.1"
"webpack": "^5.23.0"
"react": "^17.0.2"
"react-leaflet": "^3.2.5"
node: v16.13.0
O.S.: Ubuntu 20.04 Desktop

What am I doing wrongly or what am I missing? How to make react-leaflet working?

Indeed you initially were just missing a defined height on your <MapContainer> component.

https://react-leaflet.js.org/docs/start-setup/

If the map is not displayed properly, it is most likely because you haven't followed all the prerequisites.

[...] Make sure your map container has a defined height

Now you are just missing a Tile Layer:

<MapContainer>
  <TileLayer
    attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
  />
  // More Layers...
</MapContainer>