Reactjs – How can I apply Hashlink outside the Router without changing the logic of this code?

The errors –

App.jsx

import React, { useEffect, Suspense, Fragment } from "react";
import { useSelector } from "react-redux";
import { createBrowserRouter, RouterProvider } from "react-router-dom";
import RootLayout from "./pages/Root";
import FullPageScroll from "./UI/FullPageScroll";
import NestedFullPageScroll from "./UI/NestedFullPageScroll";
import HeroArea from "./components/Hero area/HeroArea";
import AboutSection from "./components/About me/AboutSection";
import PortfolioSection from "./components/Portfolio/PortfolioSection";
import ContactSection from "./components/Contact me/ContactSection";
import Footer from "./components/Footer/Footer";
import ProjectDetails from "./components/Project details/ProjectDetails";
import Navigation from "./components/Navigation/Navigation";
import { AnimatePresence } from "framer-motion";



const router = createBrowserRouter([
  {
    path: '/',
    element: <RootLayout />,
    children: [
      {
        index: true,
        element: (
          <FullPageScroll>
            
            <HeroArea id="home"/>
            <AboutSection id="about"/>
            <PortfolioSection id="portfolio"/>
            <ContactSection id="contact"/>
            <Footer />
          </FullPageScroll>

        ),
      },
      {
        path: 'portfolio/details',
        element: <Suspense><NestedFullPageScroll><ProjectDetails /></NestedFullPageScroll></Suspense>,
      },
    ],
  },
]);

const App = () => {
  const overlay = useSelector(state => state.navigation.isOpen);


  return <Fragment>
    <AnimatePresence>
    {overlay && <Navigation/>}
    </AnimatePresence>
    <RouterProvider router={router} />;
    </Fragment>
};

export default App;

Navigation.jsx

import React from "react";
import classes from "./Navigation.module.css";
import Container from "../../UI/Container";
import Overlay from "../../UI/Overlay";
import { HashLink } from 'react-router-hash-link';

function Navigation() {


  return (
    <Overlay>
      <nav className={classes.navigation}>
        <Container>
          <ul className={classes["nav-container"]}>
            <li><HashLink to={"/#home"}>Home</HashLink></li>
            <li><HashLink to={"/#about"}>About me</HashLink></li>
            <li><HashLink to={"/#portfolio"}>Portfolio</HashLink></li>
            <li><HashLink to={"/#contact"}>Contact me</HashLink></li>
          </ul>
        </Container>
      </nav>
    </Overlay>

  );
}

export default Navigation;
import React from "react";
import classes from "./Navigation.module.css";
import Container from "../../UI/Container";
import Overlay from "../../UI/Overlay";
import { HashLink } from 'react-router-hash-link';

function Navigation() {


  return (
    <Overlay>
      <nav className={classes.navigation}>
        <Container>
          <ul className={classes["nav-container"]}>
            <li><HashLink to={"/#home"}>Home</HashLink></li>
            <li><HashLink to={"/#about"}>About me</HashLink></li>
            <li><HashLink to={"/#portfolio"}>Portfolio</HashLink></li>
            <li><HashLink to={"/#contact"}>Contact me</HashLink></li>
          </ul>
        </Container>
      </nav>
    </Overlay>

  );
}

export default Navigation;

I am developing a portfolio page with full scrolling. I marked this page as the main page in routing. I also have navigation controlled by redux action and later with condition. The problem is that I need to go from the navigation to a specific section of the main page. I used react-router-hash-link. After I added Hashlink to the list, I saw a lot of errors. I would be very grateful for your help!

I tried to move the ID to the components itself and nothing changes. I just need to navigate on the same page to different sections.