Why my customize cursor keep blinking in react

Question

I have problem with my customize cursor and this has been in a month but now I created it again and still wasn't solve it still. I'll direct how it will works.

First let say I have a three functions and combined them..each of them has to be position absolute inside their section. Basically something like this

return (
   <div className="App">
     <div className='cursor' ref={mouseRef}></div>
     <Section1/>
     <Section2/>
     <Section3/>
   </div>
)

As you see we have the mouseRef and you definitely already know that how it works so I will not further explain it.

In that className="App" I have something like this in my useEffect

window.addEventListener("mousemove",cursor)
function cursor(e) {
   mouseRef.current.style.top = e.pageY + "px";
   mouseRef.current.style.left = e.pageX + "px"
}

with a CSS of

.cursor {
  width: 3rem;
  height: 3rem;
  background: white;
  border: 5px solid black;
  border-radius: 50%;
  position: absolute;
  transform: translate(-50%, -50%);
  transition: all 0.5 ease;
  transition-property: background,transform;
}

Now here's the problem came up. Remember there is a z-Index when I have position absolute in each section and that's how my problem came up. I try to research some things but couldn't find the right one.. It is just about customizing but not consistent in any kind of positions and z-index. All section has the same class so the CSS will be

.section { 
   width:100%;
   height:100vh;
   background:silver;
}

We just leave the Section 1 as normal container

Now Let say in Section2.jsx I have a code something like this for CSS and JSX.

return(
    <div class="section second>
       <div class="pos_absolute_item">
          <h3> Justin Bieber love's banana </h3>
       </div>
    </div>
)

.second { 
   .pos_absolute_item { 
      position:absolute;
      background:orange;
      width:100%;
      height:100%;
      display:flex;
      alight-items:center;
      justify-content:center;
   }  
}

This also works in third sections

return(
    <div class="section third>
       <div class="pos_absolute_item">
          <h3> Justin Bieber love's banana </h3>
       </div>
    </div>
)

.third { 
   .pos_absolute_item { 
      position:absolute;
      background:orange;
      width:100%;
      height:100%;
      display:flex;
      alight-items:center;
      justify-content:center;
   }  
}

As you see in the first part of the section the mousecursor is visbile but when you try to go down in second section and third section the mousecursor will be in backside of the pos_absolute_item And so I did something like this in my second code snippet

  useEffect(() => {
    window.addEventListener("mousemove",cursor)
    function cursor(e) {
      mouseRef.current.style.top = e.pageY + "px";
      mouseRef.current.style.left = e.pageX + "px"

      const header = document.querySelector(.section.second")
      
      mouseRef.current.style.zIndex = "3"
      header.addEventListener("mouseover",() => {
          mouseRef.current.style.background = "red"
      })
  
      header.addEventListener("mouseout",() => {
          mouseRef.current.style.background = "whitesmoke"
          mouseRef.current.style.zIndex = "0"
      })
    }
  },[])

and so that's my problem here. This problem only WORKS when I have position relative in second section and third section because it will hide the outside of it sections so that what happens to cursor so that header.addEventListener("mouseover") will not work since it is above the sections but when I try to make it like zIndex = 0 then it will hide the section... Any solution abt this?

To be clear what I want to happen here is the how to make animation in different z-Index or absolute position for animating the cursor different style in different sections.. Thats my POINT here in this problem.