css – Mousefollower shouldn’t be hovering over the opposite parts

i’ve used mousefollower to hover throughout my touchdown web page however it would not hover after I scroll down and over different parts. it solely stays from high to 100vh, however would not seem after I scroll down and hover over different parts.

that is the App.js

import { useContext, useEffect, useState } from 'react';
import './App.css';
import About from './parts/About';
import Footer from './parts/Footer';
import MainFooter from './parts/MainFooter';
import Navbar from './parts/Navbar';
import Secondpart from './parts/SecondPart';
import ArrowOutwardIcon from '@mui/icons-material/ArrowOutward';
import AuthContext, { AuthProvider } from './context/Context';




perform App() {




  const { handleMouseMove,place } = useContext(AuthContext)

  return (
    <div className="App" id='App'  >
      <div
        className="follower-circle"
        type={{
          remodel: `translate(${place.x + 10}px, ${place.y - 10}px)})`,
        }}
      ></div>
      <div className="residence" onMouseMove={handleMouseMove} >

        <Navbar />

        <MainFooter />

        <Secondpart />

        <About />

        <Footer />

      </div>
    </div>
  );
}

export default App;

that is the Context.js

import React, { createContext, useState, useEffect } from 'react'
// import { useNavigate } from 'react-router-dom';
import gsap from 'gsap';


const AuthContext = createContext();


export default AuthContext;




export const AuthProvider = ({ kids }) => {


    const [position, setPosition] = useState({ x: 0, y: 0 });
    const [loadingEffect, SetLoadingEffect] = useState(true)


    const handleMouseMove = (e) => {
        setPosition({ x: e.clientX, y: e.clientY });
    };


    useEffect(() => {
        (
            async () => {
                const LocomotiveScroll = (await import('locomotive-scroll')).default;
                const locomotiveScroll = new LocomotiveScroll();
            }
        )()
        const timerId = setInterval(() => {
            SetLoadingEffect(false);
        }, 700); // Run the interval each 1000ms (1 second)

        // Clear up the timer when the element unmounts
        return () => {
            clearInterval(timerId);
        };
    }, [])



    return (
        <AuthContext.Supplier worth={{
            handleMouseMove: handleMouseMove, place: place, setPosition: setPosition,
        }}>
            {kids}
        </AuthContext.Supplier>
    )
}

one of many parts(footer.js):

import React, { useContext } from 'react'
import AuthContext from '../context/Context'

export default perform Footer() {

    const { handleMouseMove } = useContext(AuthContext)

    return (
        <part className="footer">
            <div className="footerLeft">
                <p>2023©</p>
                <p>2.30 PM EST</p>
            </div>
            <div className="footerRight">
                <a href="https://www.linkedin.com/in/naimur-sharon-23b400260">Linkedin</a>
                <a href="https://www.fb.com/naimur.saron">Fb</a>
                <a href="https://www.instagram.com/naimursharon/">Instagram</a>
            </div>
        </part>
    )
}

Mousefollower CSS:

.residence {
  place: relative;
  coloration: #fff;
}
.follower-circle {
  width: 15px;
  peak: 15px;
  border-radius: 50%;
  place: absolute;
  transition: all cubic-bezier(0.19, 1, 0.22, 1) 0.35s;
}
}