I am making a web app that has multiple divs which are generated by reading an API call. Each div has an instance of a Leaflet JS map. This map has a unique polygon on it. However, I notice that when I have two or more divs, every map before the last one loses its tile data and becomes a blank map, however it does retain that polygon. I don’t know why this is happening and I would appreciate some help.

The relevant part of the initialization code:

this.map = L.map(this.routeid+"map").setView(this.centerlocation,15)//both routeid and centerlocation are working properly
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
            maxZoom: 19,
            attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
        }).addTo(this.map);//Even though it is regenerating for each object, only the last one works.
        new L.Polygon(this.polygon).addTo(this.map)// This works properly
        //this.map.invalidateSize()