Why does canvas draw multiple times in react?

Question

JavaScript

I have a component that renders canvas three.js, the problem is that when I open the page in the browser, I see 2, or even 4 canvases, if I first click on the function
. The render initialization code:

const renderer = new THREE.WebGLRenderer({canvas, antialias: true});
        renderer.shadowMap.enabled = true;
        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.shadowMapSoft = true;
        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.outputEncoding = THREE.sRGBEncoding;
        renderer.toneMapping = THREE.ACESFilmicToneMapping;
        renderer.toneMappingExposure = 0.5;
      
        document.body.appendChild(renderer.domElement);

The component is functional, I can’t throw off the whole one, because it has 500+ lines.
I can send more if needed. It seems to me that this is a feature of react, which runs the component rendering process several times, updating the state, and since I connect the canvas through appendchild, it runs this command several times. How can this be avoided?