I want to ask i.e. Why is the heatmap color not showing on the map? and I use from API and GeoJSON is there anything wrong with my own coding? Is there any part of const position = response.features? Link 1 and Link 2

The following example does not show the heatmap color but it comes out like a box and it says marker.

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

                    const FeatureCollection = {
                        type: "FeatureCollection",
                        features: array,
                    };
                    if (geoJsonLayer.current) {
                        geoJsonLayer.current.clearLayers().addData(FeatureCollection);
                    }

                    const position = response.features
                        ? response.features.forEach((element) => {
                            return [element["geometry"]["x"], element["geometry"]["y"]];
                        })
                        : [];

                    if (geoJsonLayer.current) {
                        L.heatLayer(position).addTo(FeatureCollection);
                    }

                    setData(FeatureCollection);


                })
                .catch((err) => console.log(err))
                .finally(() => setIsLoading(false));
        };

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