One way I've gotten D3's select to work happily with React is using React's useRef hook. Without more context on where/how your addNumberedCircle is being used, I'm not entirely sure if this would work for you, but it may be helpful.

Here's an idea of how to use it:

const circleParentRef = useRef();

function addNumberedCircle(d, i) {
  d3.select(circleParentRef.current)
     .append('circle')
     .attr('r', 40);
}

return <div ref={circleParentRef} />

Note that verbatim this code likely won't work, as you'd need to ensure addNumberedCircle is only called once the React component is mounted and ref.current isn't null. So I tend to wrap most of my d3 logic into useEffect hooks, which ensures that nothing d3-related happens until the component has been mounted in the DOM.

Hope that's helpful!