"Why not showing heatmap colors in reactJS (GeoJSON)?"

I was copying code from this solution: Is there a way to use leaflet.heat in react? and I'm getting an error.

in the currentPosition function

export const currentPosition = atom({
  key: "currentPosition",
  default: [-2.600, -11.01],
});

in the getLocationCity function

export const getLocationCity = async (params) => {
  try {
    const body = DataCustom(params);
    const result = await instanceArcgis.post(
      "/rest/HomeLocation/11/query",
      body,
    );
    return await result?.data;
  }catch (error) {
    console.log(error);
  }

I'm sure it's a var or placement order issue, but I tried different options and it still doesn't work. And it produces result from API but no Heatmap color comes out just "Marker" and I check in inspect it doesn't have any error.
Full JS code:

import React, { useEffect, useState, useRef } from "react";
import { GeoJSON } from "react-leaflet";
import { useRecoilValue, useSetRecoilState } from "recoil";
import HeatmapOverlay from "leaflet-heatmap";
import { arcgisToken } from "../recoil";
import { mapBounds, loadingMap } from "../state";
import { getLocationCity } from "../data/arcgis";
import "leaflet.heat";

export default function HGood() {
    const [data, setData] = useState();
    const setIsLoading = useSetRecoilState(loadingMap);
    const bounds = useRecoilValue(mapBounds);
    const tokenArcgis = useRecoilValue(arcgisToken);
    const geoJsonLayer = useRef(null);

    useEffect(() => {
        const fetchDataSpeedtestKel = () => {
            const body = {
                returnGeometry: true,
                rollbackOnFailure: true,
                geometry: JSON.stringify({
                    xmin: bounds.west,
                    ymin: bounds.south,
                    xmax: bounds.east,
                    ymax: bounds.north,
                    spatialReference: { wkid: 4326 },
                }),
                geometryType: "esriGeometryEnvelope",
                token: tokenArcgis,
            };

            setIsLoading(true);
            getLocationCity(body)
                .then((response) => {
                    let array = [];
                    let points = [];
                    response.features.forEach((element) => {
                        points.push([
                            element["geometry"]["x"],
                            element["geometry"]["y"],
                        ]);

                        array.push({
                            type: "Feature",
                            properties: element["attributes"],
                            geometry: {
                                type: "Point",
                                coordinates: [
                                    element["geometry"]["x"],
                                    element["geometry"]["y"],
                                ],
                            },
                        });
                    });

                    // var map = L.map('leafletmap').setView(new L.LatLng(position), 1);

                    const FeatureCollection = {
                        type: "FeatureCollection",
                        features: array,
                    };

                    let feature = {
                        type: "Feature",
                        properties: body,
                        geometry: setData(FeatureCollection),
                    };

                    if (geoJsonLayer.current) {
                        geoJsonLayer.current.clearLayers().addData(FeatureCollection);
                    }

                    array.push(feature);

                    // L.heatLayer(points, {
                    //     radius: 0.1,
                    //     maxOpacity: 1,
                    //     scaleRadius: true,
                    //     useLocalExtrema: true,
                    // }).addTo(array);
                })
                .catch((err) => console.log(err))
                .finally(() => setIsLoading(false))
        };

        fetchDataSpeedtestKel();
    }, [bounds, setIsLoading, tokenArcgis]);

    if (data) {
        return (
            <>
                <GeoJSON
                    ref={geoJsonLayer}
                    data={data}
                />
            </>
        );
    }
}