Three.js react js/next js duplicated content

I am using Three.js in react(next js) and a Mesh I have created is duplicated multiple times

import * as THREE from 'three';


function Index() {
    if (process.browser) {
        const scene = new THREE.Scene();
        const camera = new THREE.
            PerspectiveCamera(
                75, 
                window.innerWidth / window.innerHeight,
                0.1, 
                1000
            );

        const renderer = new THREE.WebGLRenderer();

        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.setPixelRatio(window.devicePixelRatio);
        document.body.appendChild(renderer.domElement);

        console.log(scene.children);
        const geometry = new THREE.BoxGeometry();
        const material = new THREE.MeshBasicMaterial({color: 0x00ff00});
        const cube = new THREE.Mesh(geometry, material);
        scene.add(cube);
        console.log(scene.children);
        camera.position.z = 12;

        renderer.render(scene, camera);
        return <div> </div>
    }
    return null;

}

export default Index;

Like so:

Then console tab has:

The aim is to have 1 cube on the screen without the scrolling(both horrizontal and vertical).

I suspect it's down to document.body.appendChild, I haven't found an alternate method instead of this either.

Via Active questions tagged javascript - Stack Overflow https://ift.tt/2FdjaAW