Private Routes in React

Question

I am trying to make an E-commerce application using react and Django. In react Section, I am getting errors at the routing of the page. Here is code Snipet

    import React from "react";
    import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
    import PrivateRouts from "./auth/helper/PrivateRouts";
    import Home from "./core/Home";
    import Signup from "./user/Signup";
    import UserDashboard from "./user/UserDashboard";
    
    const Routs = () => {
      return (
        <React.StrictMode>
          <Router>
            <Routes>
              <Route
                path="/user/dashboard"
                element={
                  <PrivateRouts>
                    <UserDashboard />
                  </PrivateRouts>
                }
              ></Route>
    
              {/* <Route exact element={<PrivateRouts />}>
                <Route exact path="/user/dashboard" element={UserDashboard} />
              </Route> */}
              <Route exact path="/" element={<Home />} />
              <Route exact path="/signup" element={<Signup />} />
            </Routes>
          </Router>
        </React.StrictMode>
      );
    };
    
    export default Routs;

The private Root file is import React from "react"; import { Route, Navigate } from "react-router-dom";

import { isAuthenticated } from "./index";

const PrivateRouts = ({ component: Component, ...rest }) => {
  return (
    <>
      <Route
        {...rest}
        render={(props) =>
          isAuthenticated ? (
            <Component {...props} />
          ) : (
            <Navigate
              to={{
                pathname: "/signin",
                state: { from: props.location },
              }}
            />
          )
        }
      />
    </>
  );
};

export default PrivateRouts;

I could Route the page to PrivateRoutes.