D3 pie chart hover effect in React app not working-CodePudding

I'm currently building a pie chart in a React app using D3 and I'm trying to do a simple opacity change on hover but for whatever reason the effect doesn't happen on my local environment.

g.selectAll('path')
    .data(pie(data))
    .enter()
    .append('path')
    .attr('fill', (data, index) => color(index))
    .attr('d', arc)
    .on('mouseover', function (event, d) {
        d3.select(this).transition()
            .duration(200)
            .attr('opacity', .5)
    })
    .on('mouseout', function (d, i) {
        d3.select(this).transition()
            .duration(200)
            .attr('opacity', 1)
    })

However, when I put the exact same code in a Codepen (https://codepen.io/ddoria/pen/KKoQpOX), the effect works. Any idea what's going on?

CodePudding user response：

Figured out the issue. This was due to useEffect being called twice which was introduced in React 18 in dev mode. To get around this, removed the <React.StrictMode> tags in the render call in src/index.js