L.divIcon is not working

[robinhood6996]

Here is my component : TweetsResults.
fetchIcon function is used in multiple places and its working well. But Not working for only this component.

Can anyone help me to findout the issue ?

`import React from "react";
import { Marker, Popup, useMap } from "react-leaflet";
import L, { divIcon } from "leaflet";
import useSupercluster from "use-supercluster";
import TooltipTweet from "./TooltipTweet";

const TweetsResults = ({ points, bounds, zoom }) => {
const map = useMap();
const icons = {};
const fetchIcon = (count) => {
if (!icons[count]) {
icons[count] = divIcon({
className: "remove-marker",
html: <div className="cluster-marker" style="color: #000000; background-color: rgb(173 156 227); border: 5px solid rgb(66 45 198); border-radius: 50%; padding: 12px; width: 10px; height: 10px; display: flex; justify-content: center; align-items: center;">${count}</div>,
});
}
return icons[count];
};

const cuffs = () => {
return L.divIcon({
className: "remove-marker",
html: <div className="cluster-marker"><svg width="40px" height="40px" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"> <circle cx="24" cy="24" r="20" fill="#1DA1F2"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M36 16.3086C35.1177 16.7006 34.1681 16.9646 33.1722 17.0838C34.1889 16.4742 34.9697 15.5095 35.3368 14.36C34.3865 14.9247 33.3314 15.3335 32.2107 15.5551C31.3123 14.5984 30.0316 14 28.6165 14C25.8975 14 23.6928 16.2047 23.6928 18.9237C23.6928 19.3092 23.7368 19.6852 23.8208 20.046C19.7283 19.8412 16.1005 17.8805 13.6719 14.9015C13.2479 15.6287 13.0055 16.4742 13.0055 17.3766C13.0055 19.0845 13.8735 20.5916 15.1958 21.4747C14.3878 21.4491 13.6295 21.2275 12.9647 20.8587V20.9203C12.9647 23.3066 14.663 25.296 16.9141 25.7496C16.5013 25.8616 16.0661 25.9224 15.6174 25.9224C15.2998 25.9224 14.991 25.8912 14.6902 25.8336C15.3166 27.7895 17.1357 29.2134 19.2899 29.2534C17.6052 30.5733 15.4822 31.3612 13.1751 31.3612C12.7767 31.3612 12.3848 31.338 12 31.2916C14.1791 32.6884 16.7669 33.5043 19.5475 33.5043C28.6037 33.5043 33.5562 26.0016 33.5562 19.4956C33.5562 19.282 33.5522 19.0693 33.5418 18.8589C34.5049 18.1629 35.34 17.2958 36 16.3086Z" fill="white"/> </svg></div>,
});
};
const { clusters, supercluster } = useSupercluster({
points: points,
bounds: bounds,
zoom: zoom,
options: { radius: 75, maxZoom: 17 },
});

return (
<>
{clusters.map((cluster, index) => {
//every cluster point has coordinates
// const [latitude, longitude] = cluster.geometry.coordinates;
// the point may be either a cluster or a crime point
// const { cluster: isCluster, point_count: pointCount } = cluster.properties;
// console.log('cluster',cluster, cluster.geometry.coordinates[0], cluster.geometry.coordinates[1])
// we have a cluster to render
if (cluster.properties.cluster === true) {
const clustersCor = supercluster.getChildren(cluster.id).map((cl) => {
return cl.geometry.coordinates.reverse();
});
console.log("clustercluster", cluster);
return (
<Marker
key={cluster-${cluster.id ?? index}}
position={[cluster.geometry.coordinates[0].toFixed(4), cluster.geometry.coordinates[1].toFixed(4)]}
icon={fetchIcon(cluster.properties.point_count)}
eventHandlers={{
click: () => {
const expansionZoom = Math.min(supercluster.getClusterExpansionZoom(cluster.id), 50);
map.setView([cluster.geometry.coordinates[0], cluster.geometry.coordinates[1]], expansionZoom, {
animate: true,
});
},
}}
>
);
}
// we have a single point to render
return (
<Marker key={clusterUser-${index}} position={[cluster.geometry.coordinates[0], cluster.geometry.coordinates[1]]} icon={cuffs(1)}>
{cluster?.properties && }

);
})}
</>
);
};

export default TweetsResults;
`

[piotr-cz]

At this point your snippet is not very readable
You'd have a better change to get help if you provide a reproduction using tool such as https://stackblitz.com/.