How to use Outlet in my file to render the page successfully?

Question

I'm trying Routing for the first time by following this tutorial. In the tutorial, the instructor has used the react router v5 but I wanted to follow the tutorial with the v6. I have tried to understand how the Outlet should work through some of the tutorials but failed to implement is successfully to my code. Whenever I try to render my page, I get the following error:

No routes matched location "/"

Can someone help me out with how to use Outlet in my Routes.js file so that I can render my page successfully? Here are code to my files :

File App.js

import React from "react";
import { BrowserRouter as Router, Route, Routes} from "react-router-dom";
import { Home, Browse, Signin, Signup } from "./pages";
import * as ROUTES from './constants/routes';
import { IsUserRedirect, ProtectedRoute } from "./helpers/routes";

export default function App() {
  const user = null;

  return (
    <Router>
      <Routes>
        
        {/* if the user is not signed in, we will direct it to the sign in page */}
        <Route
          exact
          path={ROUTES.SIGN_IN}
          element={
            <IsUserRedirect
            user={user}
            loggedInPath={ROUTES.BROWSE}
            path={ROUTES.SIGN_IN}
            >
            <Signin />
            </IsUserRedirect>
          }
        />
        
        {/* if the user doesn't exist then we will direct it to the sign up page */}
        <Route
          exact
          path={ROUTES.SIGN_UP}
          element={
            <IsUserRedirect
            user={user}
            loggedInPath={ROUTES.BROWSE}
            path={ROUTES.SIGN_UP}
            >
            <Signup />
            </IsUserRedirect>
          }
        />

        {/* if the user is successfully signed in then we will direct them to the browse page */}
        <Route 
          exact 
          path={ROUTES.BROWSE}
          element={
            <ProtectedRoute
              user={user}
              path={ROUTES.BROWSE}
            >
              <Browse />
            </ProtectedRoute>
          }
        />

        {/* here the matched leaf outlet error is occuring */}
        {/* <Route 
          exact 
          path={ROUTES.HOME}
          element={
            <ProtectedRoute
              user={user}
              path={ROUTES.HOME}
            >
              <ROUTES.HOME />
            </ProtectedRoute>
          }
        /> */}
        
      </Routes>
    </Router>
  );
}

File Routes.js

import React from 'react';
import { Route, Navigate, Routes, Outlet, useNavigate } from 'react-router-dom';

export function IsUserRedirect({ user, loggedInPath, children, ...rest }) {
    
    <Route 
        {...rest}
        render={() => {
            // if the user doesn't exist then we will render them to the children which can be thier sign-in or sign-up page 
            if (!user) {
                return children;
            }
            if (user) {
                return (
                    <Navigate
                        to={{
                            pathname: loggedInPath,
                        }}
                    />
                );
            }
            return <Outlet />
        }}
    />
    // if (!user) {
    //     return children;
    // }
    // if (user) {
    //     return <Navigate to={{ pathname:loggedInPath }} />;
    // }

    return <Outlet />;
}

export function ProtectedRoute({ user, children, ...rest }) {
    return (
            <Route 
                {...rest}
                render={({ location }) => {
                    if (user) {
                        return children;
                    }

                    if (!user) {
                        return (
                            <Navigate 
                                to={{
                                    pathname: 'signin',
                                    state: { from: location },
                                }}
                            />
                        );
                    }
                    return null;
                }}
            />
    )
}

Here is the file where URLs are stored, i.e., src/constants/routes.js

export const HOME = '/';
export const BROWSE = '/browse';
export const SIGN_UP = '/signup';
export const SIGN_IN = '/signin';

I've tried to use the nested routes and then the Outlet in my Routes.js file, but can't figure out where I'm going wrong.