D3 + Leaflet map with react js

I'm trying to make a map and plot pins with d3 in the same map, but somehow the pins don't appear and i dont get any error, but sometimes appear this error.

My code basically takes data from an api, to get the data from lat and long to put in a leaflet map. g.selectAll(...).data(...).enter is not a function

here's my code

 React.useEffect(() => {
        async function getWellheadf() {
            const getWellhead = await ApiService.getWellhead();

            const svg = d3.select(mapref.current).select("svg"),
                g = svg.append("g");
            getWellhead.data.forEach(function (d) {
                d.LatLng = new L.latLng(d.Latitude, d.Longitude);
                setWellhead(d.LatLng)
            })
            if (map) {
                L.tileLayer('https://services.arcgisonline.com/arcgis/rest/services/Ocean/World_Ocean_Base/MapServer/tile/{z}/{y}/{x}.png', {
                    id: 'mapbox/streets-v11',
                }).addTo(map);
                console.log(wellhead)
                const feature = g.selectAll("circle")
                    .data(wellhead)
                    .join("circle")
                    .enter().append("circle")
                    .style("stroke", "black")
                    .style("opacity", .6)
                    .style("fill", "red")
                    .attr("r", 20);

                const update = () => {
                    feature.attr("transform",
                        function (d) {

                            return "translate(" +
                                map.latLngToLayerPoint(d.LatLng).x + "," +
                                map.latLngToLayerPoint(d.LatLng).y + ")";
                        }
                    )
                }
                map.on("viewreset", update);



                // L.circle(wellhead, {
                //     color: 'black',
                //     fillColor: '#f03',
                //     fillOpacity: 0.5,
                //     radius: 500
                // }).addTo(map);
            }
        }
        getWellheadf();
    }, [map]);