React-Leaflet - Wait until WMSLayer has finished loading to redraw

Question

I have a WMSLayer which takes a string of comma-separated layer names to make a call to fetch tiles.

import React, { Component } from "react";
import { WMSTileLayer } from "react-leaflet";

class WMSLayers extends Component {
  render = () => (
    <WMSTileLayer
      format="image/png"
      layers={this.props.layers}
      url="https://ws.topogrids.de/geoserver/ows"
    />
  );
}

This component begins network requests when the layers prop changes. This means as soon as a new layers prop is passed, the current WMSLayer is erased, and new tiles begin to draw as they are received. This of course makes total sense.

What I would like to do is somehow retain the old component until the new tiles are fetched, and then render the new tiles all at once. This way, if I simply turn one more layer on, the current layers do not disappear.

I realize I can accomplish this by creating a separate WMSTileLayer for each layer, but this leads to many API calls per zoom/pan if multiple layers are switched on.

The layer does provide an onLoad event that gets fired when the tiles are done loading, but I don't know how to keep the old layers drawn until this is done, if it's even possible.

Advice would be greatly appreciated!

Also, this is not a duplicate of How to keep old tiles until each new tile is loaded when redrawing a layer in Leaflet? - that question is about using multiple layers with one map, but this question is about using one layer with a map (I realize the WMSTileLayer layers prop name might make this seem confusing)