D3 pie chart hover effect in React app not working

Question

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?

Answer 1

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