Renderer goes black: setAnimationLoop

Hi,

I recently decided to write my threejs project in react and so far its going good except one issue im getting stuck on… well basically after creating the renderer, the canvas and loading all assets and creating the scene im calling the animation loop like this:

const animationLoop = () => {
			ctrl.enabled = true;
			ctrl.autoRotate = rotate.current;
			ctrl.autoRotateSpeed = Number(rotateSpeed.current);
			ctrl.update();

			renderer.render(scene, camera);
		};

		renderer.setAnimationLoop(animationLoop);

Now the main aim right now is to have a config window on the viewer that allows you to change the autoRotate and autoRotateSpeed after the renderer has rendered the scene. And it does work! However everytime I change the values, the renderer (or the scene?)'s background becomes black, here is an example:


https://i.imgur.com/75FUDZC.png

UPDATE: I have already tried using requestAnimationFrame and using renderer.setClearColor (and also clearing it in the renderer)