[Question] How to set default selection in LayerControl

[dansiviter]

I'd like to know how to select the default layer within the LayerControl. Is seems this is a somewhat confusing thing outside of react so wonder if there is something I'm missing. I have the following:

const osm = (
    <TileLayer
      attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'
      url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      zIndex={ -1 }
  />);

  return (
    <MapContainer>
      { osm }
      <LayersControl position="topright">
        <LayersControl.BaseLayer name="OpenStreetMap">
        { osm }
        </LayersControl.BaseLayer>
        <LayersControl.BaseLayer name="OpenStreetMap HOT">
          <TileLayer
            attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a>'
            url="https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png"
          />
        </LayersControl.BaseLayer>
      </LayersControl>
 </MapContainer>
  )
}

But it doesn't select it:

I've tried a few variants moving the TileLayer around but to no avail.