I am trying to use leaflet.heat and GeoJSON in reactJS. I have already made leaflet library to work with react hooks but unfortunately I can't use leaflet.heat in react. I import the module like:

import { GeoJSON } from "react-leaflet";
import "leaflet.heat";

When I run the react app I do not get any errors but the leaflet heatmap is not displayed

Here's an example of my coding for a heatmap:

setIsLoading(true);
            getHome(body)
                .then((response) => {
                    const array = [];
                    response.features.forEach((element) => {
                        array.push({
                            type: "Feature",
                            properties: element["attributes"],
                            geometry: {
                                type: "Point",
                                coordinates: [
                                    element["geometry"]["lat"],
                                    element["geometry"]["lng"],
                                ],
                            },
                        });
                    });

                    const FeatureCollection = {
                        type: "FeatureCollection",
                        features: array,
                    };
                    if (geoJsonLayer.current) {
                        geoJsonLayer.current.clearLayers().addData(FeatureCollection);
                    }
                    setData(FeatureCollection);
                })
                .catch((err) => console.log(err))
                .finally(() => setIsLoading(false));

and from the coding section of getHome it's data API:

export const getNonAPC = async (params) => {
  try {
    const body = FormDataCustom(params);
    const result = await instanceArcgis.post(
      "/rest/Home/MapServer/5/query",
      body,
    );

    return await result?.data;
  } catch (error) {
    return error?.response?.data;
  }
};