Problem displaying tiles with Leaflet under Angular 16 when enlarging the map

Question

I'm having a problem with Leaflet integration in my Angular 16 project. When I enlarge the size of the map, it seems that the tiles in the new part of the map don't load correctly.

Here is an extract from my code:

@Input() currentLat: any;
  @Input() currentLong: any;
  @Input() balList: any;
  @Input() mapStyle: any;
  map: any;

  private initMap(): void {
    var greenIcon = L.icon({
      iconUrl: "/assets/book.png",
      // shadowUrl: 'leaf-shadow.png',

      iconSize: [30, 40], // size of the icon
      shadowSize: [50, 64], // size of the shadow
      iconAnchor: [0, 0], // point of the icon which will correspond to marker's location
      shadowAnchor: [4, 62], // the same for the shadow
      popupAnchor: [-3, -76] // point from which the popup should open relative to the iconAnchor
    });

    this.map = L.map("map", {
      center: [this.currentLat, this.currentLong],
      zoom: 12
    });

    const tiles = L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
      maxZoom: 18,
      minZoom: 3,
      attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
    });

    this.balList.forEach((elm: any) => {
      var marker = new L.Marker([elm.boite_lat, elm.boite_long], { icon: greenIcon });

      marker.addTo(this.map).bindPopup("" + elm.boite_livre_name + "\n");
    });

    tiles.addTo(this.map);
  }

  constructor() {}

  ngAfterViewInit(): void {
    this.initMap();
  }

When I enlarge the map by changing the height and width of the div containing the map, the tiles in the new enlarged area don't seem to load.

Has anyone ever encountered this problem and would like to suggest a solution? Thanks in advance for your help!

I tried deleting the map and recalling map initialization.