I have set code to change transform property in React. Initially, it is set to --scaleX as 1, then after 6 seconds first setTimeout change it in 0 and 6 seconds after (meaning 12 second from start) setInterval activates and runs every 12 seconds, doing also a change of that style every 6 seconds (total setInterval duration is 12 seconds). A sample of the code is shown below.

useEffect(() => {
   setTimeout(() => {
      redRef.current.style.setProperty("--scale", "scaleX(0)");
    }, 6000);

    let repeatSec = setInterval(() => {
      redRef.current.style.setProperty("--scale", "scaleX(1)");

      setTimeout(() => {
        redRef.current.style.setProperty("--scale", "scaleX(0)");
      }, 6000);
    }, 12000);

    return () => {
      clearInterval(repeatSec);
    };
  }, []);

But, even though I have cleared the interval, the page works and the style changes every 6 seconds, but the page is constantly blinking on strange way. For example, suddenly everything disappears and becomes white, but it returns when I scroll up/down.

Also, flickering occurs in some places at whole the site.

Why is that happening and what should I correct here to prevent it?