Not able to handle routing of React app in github project pages because of homepage filed binding issue

Question

I uploaded react app to github project pages. Github exposes the url as "user.github.io/reponame". So I added "homepage" field in package.json and set the url value.

Now, it loads fine.. but due to the routing it messes up.

I have multiple routes in App.js like this.

<div className="App">
    <NavBar />
    <Routes>
        <Route path={"/photography/*"} element={<PhotographyRoute />} />
        <Route path={"/art/*"} element={<ArtRoute />} />
        <Route path={"/admin/*"} element={<AdminRoute />} />
        <Route path={"/"} element={<Home />} />
        <Route path={"*"} element={<NotFound />} />
    </Routes>
    <Footer />
</div>

and Links like this:

<header>
    <div className="nav-wrapper">
        <div className="brandwrapper">
            <Link to={"/"} id="brandname">
                <img
                    className="brand-logo"
                    src={"/assets/atom-icon.svg"}
                    alt="brand logo"
                />
            </Link>
        </div>

        <nav>
            <Routes>
                <Route
                    path={"/photography/*"}
                    element={
                        <Link to={"/photography/"}>
                            <strong id="photography">Photography</strong>
                        </Link>
                    }
                />
                <Route
                    path={"/art/*"}
                    element={
                        <Link to={"/art"}>
                            <strong id="art">Art</strong>
                        </Link>
                    }
                />
                <Route
                    path={"/"}
                    element={
                        <a href="#AboutMe">
                            Contact Me
                            <MaterialSymbolsContactsRounded id="contactIcon" />
                        </a>
                    }
                />
                <Route
                    path={"/admin/*"}
                    element={
                        <Link to={""}>
                            <strong id="art">
                                {sessionStorage.getItem(USER_TOKEN) ? "Admin" : ""}
                            </strong>
                        </Link>
                    }
                />
                <Route
                    path={"*"}
                    element={
                        <Link to={"/"}>
                            <strong>Home</strong>
                        </Link>
                    }
                />
            </Routes>
        </nav>
    </div>
</header>

When i load site with : "user.github.io/reponame", the route does not match with any of the route in app.js. It gives 404 page.. But technically react-router or react should handle this while bundling, using the homepage property.. But it does not. It only works for static files..

And when i click on any of the links the base url changes to "user.github.io/".. When i click on Hone i.e "/" it should redirect to "user.github.io/reponame/" instead it redirects to "user.github.io/".. Same way when i click on /photography it should redirect to "user.github.io/reponame/photography" instead it redirects to "user.github.io/photograophy" which again gives 404 page...

How can i make react router replace all urls with respect to base url (for routing) ? I don't want to hard-code routes..

PS. I also have nested routes.

I tried using %PUBLIC_URL%. But did not work.