React Router Match Path Error on my local host

Question

I am trying to build a route paths with my imported components. I am doing protected routes for users who are logged in, redirect users who haven't signed in yet with <IsUserRedirect> component. I don't know how to deal with array path routes <IsUserRedirect user=[user] loggedInPath=[<Browse />] path=[<Signin />]>.

This is my App.js file:

import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import {IsUserRedirect, ProtectedRoute} from './helpers/routes';
import { useAuthListener } from './hooks';
import Home from './pages/home'
import Signin from './pages/signin'
import Browse from './pages/browse';
import Signup from './pages/signup'

function App() {
  const { user } = useAuthListener();

  return (
    <>
      <Router>
        <Routes>
          <Route
            path="/signin/*"
            element={
              <IsUserRedirect
                user={user}
                loggedInPath={<Browse />}
                path={<Signin />}
              >
                <Signin />
              </IsUserRedirect>

            }
          />
          <Route
            path="/signup/*"
            element ={
              <IsUserRedirect
                user={user}
                loggedInPath={<Browse />}
                path={<Signup />}
              >
                <Signup />
              </IsUserRedirect>
            }
          />
          <Route
            path="/browse/*"
            element={
              <ProtectedRoute user={user} path={<Browse />}>
                <Browse />
              </ProtectedRoute>
            }
          />
          <Route
            path="*"
            element={
              <IsUserRedirect
                user={user}
                loggedInPath={<Browse />}
                path={<Home />}
              >
                <Home />
              </IsUserRedirect>
            }
          />
        </Routes>
      </Router>   
    </>
  );
}

export default App;

This is the './helpers/routes' file with :

import React from 'react';
import { Routes, Route, Navigate } from 'react-router-dom';
export function IsUserRedirect({ user, loggedInPath, children, ...rest }) {

  return (

    
      <Routes>

        <Route
          {...rest}
          render={() => {
            if (!user) {
              return children;
            }
            if (user) {
              return (
                <Navigate
                  to={{
                    pathname: loggedInPath,
                  }}
                />
              );
            }

            return null;
          }}
        />

      </Routes>
     
  );
}
 
export function ProtectedRoute({ user, children, ...rest }) {

  return ( 

      <Routes>

        <Route
          {...rest}
          render={({ location }) => {
            if (user) {
              return children;
            }
            
            if (!user) {
              return (
                <Navigate
                  to={{
                    pathname: 'signin',
                    state: { from: location },
                  }}
                />
              );
            }

            //if none of
            return null;
          }}
        />
        
      </Routes>
    

  );
}

This is the error I am getting and I can't fix it:

react-dom.development.js:18687 The above error occurred in the <Routes> component:

    at Routes (http://localhost:3000/static/js/bundle.js:86406:5)
    at IsUserRedirect (http://localhost:3000/static/js/bundle.js:4470:5)
    at RenderedRoute (http://localhost:3000/static/js/bundle.js:85940:5)
    at Routes (http://localhost:3000/static/js/bundle.js:86406:5)
    at Router (http://localhost:3000/static/js/bundle.js:86344:15)
    at BrowserRouter (http://localhost:3000/static/js/bundle.js:84598:5)
    at App (http://localhost:3000/static/js/bundle.js:56:62)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.


utils.ts:435 Uncaught TypeError: _route$path.includes is not a function
    at utils.ts:435:1
    at Array.forEach (<anonymous>)
    at flattenRoutes (utils.ts:433:1)
    at matchRoutes (utils.ts:334:1)
    at useRoutes (hooks.tsx:385:1)
    at Routes (components.tsx:393:1)
    at renderWithHooks (react-dom.development.js:16305:1)
    at mountIndeterminateComponent (react-dom.development.js:20074:1)
    at beginWork (react-dom.development.js:21587:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)