My state looks like:

this.state = {
    onWayMarkers: [],
    preparingMarkers: [],
    concludedMarkers: [],
    cancelledMarkers: [],
}

May React Leaflet inside a <MapContainer>:

    <TileLayer
        attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
    />        
    <LayersControl>
        <LayersControl.Overlay checked name="Concluded">
            <LayerGroup>
                {this.state.concludedMarkers.map((element, idx) => {
                    const icon = L.divIcon({
                       className: 'custom-icon',
                           html: ReactDOMServer.renderToString(this.mapIconConcluded(element.label)),
                            iconSize: [30, 30],
                            iconAnchor: [10, 32]
                        });

                    return(
                        <Marker key={`marker-${idx}`} position={element.coord} icon={icon}>
                        <Popup>
                        <span>{element.order_id}</span>
                        </Popup>
                        </Marker>
                    );
                })}
            </LayerGroup>
        </LayersControl.Overlay>

I have one of this piece of layer codes for each array item in this.state:

<LayersControl.Overlay name="name"><LayerGroup>{array.map}</LayerGroup></LayersControl.Overlay>  

When I update the state and clear one of the arrays, this happens:
The marker from the specific array disappears
But when I deactivate and activate the layer, the marker comes back ... without the Popup. I've printed console.log(this.state.array) and even with the array emptied the marker comes back

Any ideia on why this is happening and how can I fix it?