Custom 404 React Page on Github Pages

Question

I want to redirect to a custom 404 page (React.js website hosted on GitHub Pages). I couldn't find any similar thread.

Here's (a part of) what I am using:

"dependencies": {
    "@types/react": "^18.2.57",
    "@types/react-dom": "^18.2.19",
    "react": "^18.2.0",
    "framer-motion": "^11.0.6",
    "react-dom": "^18.2.0",
    "react-redux": "^9.1.0",
    "react-router-dom": "^6.22.1",
    "react-scripts": "5.0.1",
    "typescript": "^4.9.5",
},
"devDependencies": {
    "gh-pages": "^6.1.1"
}

When I visit a page that doesn't exist, it shows the default GitHub 404 page. I'm using a framer motion animation, but it doesn't cause the issue. Here's my router code:

// React
import { useContext } from 'react';
import { Routes, Route, useLocation } from 'react-router-dom';
import { AnimatePresence } from 'framer-motion';
import { PageContext } from '../../App';

// Pages
import Details from '../details/Details';
import Main from '../main/Main';
import NotFound from '../app/NotFound';

const PageRoutes = () => {

    const location = useLocation();

    // Page Context Variables (path)
    const { urlPath } = useContext(PageContext);

    return (
        <AnimatePresence mode="wait" initial={false}>
            <Routes location={ location } key={ location.pathname }>
                        
                <Route index path={ urlPath } element={
                    <Main />
                } />

                <Route path={`${urlPath}/details`} element={
                    <Details />
                } />

                <Route path={'*'} element={
                    <NotFound />
                } />

            </Routes>
        </AnimatePresence>
    );
}
 
export default PageRoutes;

I'd like to display the component as the 404 page. The path={'*'} part works perfectly fine locally. Am I doing something wrong? Is there a way to set it up to replace the standard 404 page?