I am creating a site in react that has an initial authentication page, and a protected route to the administration panel that is shown when the user is logged in.

 //route for authentication
 <Route exact path="/" element={<AuthLayout />}>
       <Route index element={<Login />} />
 </Route>

  //route for for the board
 <Route path="/admin" element={<RutaProtegia />}>
     <Route index element={<Home />} />
     <Route path="products">
            <Route index element={<List />} />
            <Route path=":productId" element={<Single />} />
            <Route
            path="new"
            element={<New inputs={productInputs} title="Add New Product" />}
            />
     </Route>
</Route>

The protected route contains the validation on whether the user exists and based on this it shows an <Outlet/>

import { Outlet, Navigate } from "react-router-dom"
import useAuth from "../hooks/useAuth"

export const RutaProtegia = () => {

    const { auth, cargando } = useAuth();

    return (
        <>
            {auth?._id ? <Outlet /> : <Navigate to="/" />}
        </>

    )
}

The error is generated when trying to enter the /products route, it is at this point where the console shows me the following error No routes matched location "/products"