I am encountering a pretty weird problem with react-routerv6. My Routes are like this

 <Routes>
        <Route path="*" element={<NotFound />} />
        <Route path="/" element={<Landing />} />
        <Route
          path="/project/:id"
          element={
            <PrivateRoute>
              <SpecificProjectPage />
            </PrivateRoute>
          }
        />
      </Routes>

Now the path parameters are working fine until I reload the page. The following image recreates the error.

The path parameter disappears on reload and the route is matched to the last route.

What I have done till now to fix

I tried installing the latest react-router version. Tried uninstalling react-router and react-router-dom and reinstalling only react-router-dom.

Edit - 1

Here Private Route is Basically a utility component that redirects to the main page if the user is not authorized.

Here is its code

const PrivateRoute = ({ children }) => {
  let { user } = useAuth();
  return user ? children : <Navigate to={'/'} />;
};

And Not Found Page is a component rendered on wild card routes as there are no matches for /project in Routes

Here is the code for <NotFound /> component

export default function NotFound() {
  return (
  <Flex
   direction="column">
    <Heading
      >
        404
      </Heading>
      <Text fontSize="18px" mt={3} mb={2}>
        Page Not Found
      </Text>
      <Text color={'gray.500'} mb={6}>
        The page you're looking for does not seem to exist
      </Text>

      <Button
        colorScheme={'cyan'}
        variant="solid"
        onClick={() => {
            window.location.href = '/';
        }}
      >
        Go to Home
      </Button>
  </Flex>
  );
}