Implement Map Tiler Temperature weather layer with leaflet and reactjs

Question

I'm trying to make a temperature overlay on the map but getting an error:

object is not a layer

The desired outcome is as follows:

---

My Code:

import { useEffect, useContext } from 'react';
import L from 'leaflet';
import { useLeafletContext } from '@react-leaflet/core';
import { useMap } from 'react-leaflet';
import $ from 'jquery';
import axios from 'axios';
import LeafletContext from '../../context/leaflet/leafletContext';
import { Map, config, MapStyle } from '@maptiler/sdk';
import { TemperatureLayer, ColorRamp } from '@maptiler/weather';

const TemperatureLayerMapTiler = ({ data }) => {
    const context = useLeafletContext();
    const { resize } = useContext(LeafletContext);
    const map = useMap();
    const rasterLayer = L.layerGroup();
    config.apiKey = 'my_key';

    useEffect(() => {

        const layer = new TemperatureLayer({colorramp: ColorRamp.builtin.TEMPERATURE_3})


        const container = context.layerContainer || context.map;
        container.addLayer(rasterLayer);

        return () => {
            container.removeLayer(rasterLayer);
        };
    }, []);

    return null;
};

export default TemperatureLayerMapTiler;