leaflet map shows grey areas

Question

I'm trying to use leaflet map inside my react js project with https://leafletjs.com/examples/quick-start/. everything works great except for the map which shows grey areas:

PlaceCard.js:

import { Map, TileLayer, Marker, Popup } from 'react-leaflet';
import 'leaflet/dist/leaflet.css';
render() {
  <Map className="place-card-map" 
    center={[32.082532, 34.780884]}
    zoom={this.state.zoom}
  >
  <TileLayer
    attribution='Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> 
    contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © 
    <a 
    href="https://www.mapbox.com/">Mapbox</a>'
    url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
  />
  {placesMapInfo.map(placeInfo => (
    <Marker 
       position={[placeInfo.latitude,placeInfo.longitude]}
       icon={myIcon} onClick={() => this.setState({activePlace:placeInfo})}>
    </Marker>
  }
  </Map>
}

PlaceCard.css

.place-card-map{
    height: 180px;
    width: 180px;
}

index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import 'leaflet/dist/leaflet.css';

index.html

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
   integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
   crossorigin=""
/>
<!-- Make sure you put this AFTER Leaflet's CSS -->
 <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
 integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
 crossorigin="">
</script>