React Three Fiber Scroll and Hover aren't working and custom cusor is lagging

Question

I am trying to use a 3d model in my project using react three fiber. But I haven't add 3d model yet. Even though, the custom cursor i made is lagging. Cursor is the solid circle inside Cursor 2's outline circle This is custom cursor code

const Cursor = () => {
    useEffect(() => {
        const cursor = document.querySelector(".cursor-inner");
        const cursor2 = document.querySelector(".cursor-outer");
        
        window.addEventListener("mousemove", event => {
            cursor.style.top = event.pageY + "px";
            cursor.style.left = event.pageX + "px";
            cursor2.style.top = event.pageY + "px";
            cursor2.style.left = event.pageX + "px";
        })
      }, [])
  return (
    <>
    <div className="cursor cursor-inner d-flex align-items-center justify-content-center">
    </div>
    <div className="cursor cursor-outer"></div>
    </>
  )
}

export default Cursor

Another problem is I can't scroll and hover elements This is my App.jsx

const App = () => {
  return (
    <>
      <Cursor /> 
      <Canvas id='canvas'>
        <ScrollControls pages={4} damping={0.25}>
          <Scroll>
              // This will be 3D Element later
          </Scroll>
          <Scroll html style={{width: '100%'}}>
            <Header />
            <About />
            <Skills />
            <Projects />
          </Scroll>
        </ScrollControls>
      </Canvas>
    </>
  )
}

export default App

There's a hover event at Header component

useEffect(() => {
    const hoverables = document.querySelectorAll('.hoverable');
    const cursor2 = document.querySelector(".cursor-outer");
    hoverables.forEach(element => {
      element.addEventListener('mouseover', () => {
        cursor2.classList.add('hightlight-mode')
        element.classList.add('invert')
      })
      element.addEventListener('mouseout', () => {
        cursor2.classList.remove('hightlight-mode')
        element.classList.remove('invert')
      })
    })
  }, [])

Please help me how to solve this problem. I am really new to this so I don't know much I've tried adding overflow auto to every parents elements. I've tried logging out for hover event but no logs are printed even though i'm hovering the element