Get "source 'cloudsTileLayer-RasterSource' not found" error when I attempt to add a weather tile layer to Azure Maps

I have a React app using the React-Azure-Maps npm package. I am trying to create a weather layer, which I think is quite similar to the code sample from the layer.

My code to add the layer is as follows:

export function addClouds(map: any): void {       
    // Create a tile layer and add it to the map below the label layer.
    // Visible by default
    let weatherTileLayer = new layer.TileLayer({
        tileUrl: 'https://{azMapsDomain}/map/tile?api-version=2.0&tilesetId=microsoft.weather.infrared.main&zoom={z}&x={x}&y={y}',
        opacity: 0.8,
        tileSize: 128,
        maxSourceZoom: 17
    }, 'cloudsTileLayer');

    // Error occurs on this line
    map.layers.add(weatherTileLayer);
}

And here is the error that I get in the browser console:

react-azure-maps.es5.js:55  Error: layers.cloudsTileLayer: source "cloudsTileLayer-RasterSource" not found
    at Object.Or [as emitValidationErrors] (react-azure-maps.es5.js:55:1)
    at mr (react-azure-maps.es5.js:55:1)
    at wr._validate (react-azure-maps.es5.js:55:1)
    at wr.addLayer (react-azure-maps.es5.js:55:1)
    at o.addLayer (react-azure-maps.es5.js:55:1)
    at Xf._addMapboxLayers (react-azure-maps.es5.js:55:1)
    at Xf._addLayer (react-azure-maps.es5.js:55:1)
    at Xf.add (react-azure-maps.es5.js:55:1)
    at addClouds (LayerHelpers.tsx:44:1)
    at MapController.tsx:712:1

For reference, line 44 of LayerHelpers.tsx is:

map.layers.add(weatherTileLayer);

After extensive searching, I have not been able to find any information at all about this particular error message. I don't understand exactly what the problem is with what I have and am not sure exactly where to go with this.

The closest I've been able to find is this post, but using the exact format it suggested didn't make any difference.

I checked the network tab in the F12 tools, but I didn't see any API call going to Azure.

Can anyone point me in the right direction as to what this error message means and how I could go about fixing it?

Edit: I have also opened a related GitHub issue here.

Someone on the GitHub issue suggested adding the layer declaratively. They gave the following example of this:

import {
  AzureMap,
  AzureMapDataSourceProvider,
  AzureMapsProvider,
  AzureMapLayerProvider
} from "react-azure-maps";
import { AuthenticationType } from "azure-maps-control";

const option = {
  authOptions: {
    authType: AuthenticationType.subscriptionKey,
    subscriptionKey: ""
  },
  center: [-73.985708, 40.75773],
  zoom: 2
};

export default function MapWithTileLayer() {
  return (
    <div style={{ height: "300px" }}>
      <AzureMapsProvider>
        <AzureMap options={option}>
          <AzureMapDataSourceProvider id={"TileLayer DataSource "}>
            <AzureMapLayerProvider
              id={"TileLayer Layer"}
              options={{
                tileUrl:
                  "https://{azMapsDomain}/map/tile?api-version=2.0&tilesetId=microsoft.weather.infrared.main&zoom={z}&x={x}&y={y}",
                opacity: 0.8,
                tileSize: 256
              }}
              type={"TileLayer"}
            />
          </AzureMapDataSourceProvider>
        </AzureMap>
      </AzureMapsProvider>
    </div>
  );
}