How do I perform the mouse slider in react using react-router-dom?

This is my app.js

import React from "react";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import "./App.css";
import Home from "./Home";
import Navbar from "./Navbar";
import Works from "./Works";

function App() {
  return (
    <>
      <Router>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/works" element={<Works />} />
        </Routes>
      </Router>
    </>
  );
}

export default App;

This is my Home.js

import React, { useEffect, useState } from "react";
import "./App.css";
import ClimbingBoxLoader from "react-spinners/ClimbingBoxLoader";
import "./mainpage.css";
import cloud1 from "./images/cloud1.svg";
import cloud02 from "./images/cloud02.svg";
import cloud2 from "./images/cloud2.svg";
import moon from "./images/moon.svg";
import cloud3 from "./images/cloud3.svg";
import cloud01 from "./images/cloud01.svg";
import { useNavigate } from "react-router-dom";
import {
  MouseParallaxChild,
  MouseParallaxContainer,
} from "react-parallax-mouse";
import Navbar from "./Navbar";

function Home() {
  let navigate = useNavigate();
  const [loading, setloading] = useState(false);
  useEffect(() => {
    setloading(true);
    setTimeout(() => {
      setloading(false);
    }, 1000);
  }, []);

  return (
    <MouseParallaxContainer className="App">
      {loading ? (
        <ClimbingBoxLoader size={20} color={"#F37A24"} loading={loading} />
      ) : (
        <MouseParallaxContainer
          className="main-page"
          containerStyles={{
            width: "100%",
            overflow: "none",
          }}
        >
          <Navbar />
          <h1 className="heading">SASWATA</h1>
          <h1 className="heading2">GHOSH</h1>
          <span className="bar1"></span>
          <span className="bar2"></span>
          <p className="para">web developer</p>
          <p className="scrolldown">SCROLL DOWN</p>
          <span className="verticaline"></span>
          <MouseParallaxContainer
            className="moon"
            containerStyles={{
              width: "100%",
              overflow: "none",
            }}
          >
            <MouseParallaxChild
              className="moon_text"
              factorX={0.01}
              factorY={0.01}
            >
              <p>PORTFOLIO</p>
            </MouseParallaxChild>
            <MouseParallaxChild
              className="moon_img"
              factorX={0.03}
              factorY={0.05}
            >
              <img src={moon} alt="" />
            </MouseParallaxChild>
            <MouseParallaxChild
              className="cloud01"
              factorX={0.04}
              factorY={0.06}
            >
              <img src={cloud01} alt="" />
            </MouseParallaxChild>
            <MouseParallaxChild
              className="cloud02"
              factorX={0.03}
              factorY={0.05}
            >
              <img src={cloud02} alt="" />
            </MouseParallaxChild>
            <MouseParallaxChild
              className="cloud_front1"
              factorX={0.04}
              factorY={0.07}
            >
              <img src={cloud1} alt="cloud1" />
            </MouseParallaxChild>
            <MouseParallaxChild
              className="cloud3"
              factorX={0.03}
              factorY={0.05}
            >
              <img src={cloud3} alt="" />
            </MouseParallaxChild>
            <MouseParallaxChild
              className="cloud2"
              factorX={0.06}
              factorY={0.05}
            >
              <img src={cloud2} alt="cloud2" />
            </MouseParallaxChild>
          </MouseParallaxContainer>
          <div className="nav-left">
            <span className="span1"></span>
            <span className="span2"></span>
            <span className="span3"></span>
            <span className="span4"></span>
          </div>
        </MouseParallaxContainer>
      )}
    </MouseParallaxContainer>
  );
}

export default Home;

This is my Works.js

import React, { useEffect, useState } from "react";
import "./App.css";
import ClimbingBoxLoader from "react-spinners/ClimbingBoxLoader";
import "./Works.css";
import cloud02 from "./images/cloud02.svg";
import works from "./images/LandingPage.png";
import { useNavigate } from "react-router-dom";
import cloud01 from "./images/cloud01.svg";
import {
  MouseParallaxChild,
  MouseParallaxContainer,
} from "react-parallax-mouse";
import Navbar from "./Navbar";

function Home() {
  let navigate = useNavigate();
  const [loading, setloading] = useState(false);
  useEffect(() => {
    setloading(true);
    setTimeout(() => {
      setloading(false);
    }, 1000);
  }, []);

  return (
    <MouseParallaxContainer className="App">
      <MouseParallaxContainer
        className="main-page"
        containerStyles={{
          width: "100%",
          overflow: "none",
        }}
      >
        <Navbar />

        <h1 className="heading">
          Web Sec<span className="name-span">urity</span>
        </h1>
        <h1 className="heading2">Project</h1>
        <span className="bar1"></span>
        <span className="bar2"></span>
        <p className="para">website</p>

        <MouseParallaxContainer
          className="moon"
          containerStyles={{
            width: "100%",
            overflow: "none",
          }}
        >
          <MouseParallaxChild className="cloud01" factorX={0.04} factorY={0.06}>
            <img src={cloud01} alt="" />
          </MouseParallaxChild>
          <img className="works-img" src={works} alt="" />
        </MouseParallaxContainer>
        <div className="nav-left">
          <span className="span11"></span>
          <span className="span12"></span>
          <span className="span13"></span>
          <span className="span14"></span>
        </div>
        <div className="page-number">
          <p>01</p>
        </div>
      </MouseParallaxContainer>
    </MouseParallaxContainer>
  );
}

export default Home;

I want to perform mouse slide such that it lands on new page on mouse scroll.
This is the website I am referring.(https://kuon.space/).
It is done using HTML and jquery but I am trying it with React.js and CSS. I hope you can help me. I have tried almost all libraries and couldn’t help myself.