Good day everyone. I'm developing a racing league management system using React and React Router with supabase for my backend, but I'm facing a navigation issue. When I click the button to manage championships, it doesn't redirect to the expected route. I've checked my route definitions and button implementation, but the navigation fails and just puts the id of the championship in my database to the address bar url.

Has anyone encountered a similar issue or can provide guidance on troubleshooting React Router navigation problems? Any help would be greatly appreciated! Here is my configuration

Router.jsx

import { createBrowserRouter } from "react-router-dom";
import Landing from "./pages/Landing";
import Signup from "./components/Signup";
import Signin from "./components/Signin";
import Dashboard from "./routes/Dashboard";
import PrivateRoute from "./components/PrivateRoute";
import Drivers from "./components/Drivers";
import Championships from "./components/Championships";
import ManageChampionships from "./components/ManageChampionships"; // Import ManageChampionships

export const router = createBrowserRouter([
  { path: "/", element: <Landing /> },
  { path: "/signup", element: <Signup /> },
  { path: "/signin", element: <Signin /> },
  {
    path: "/dashboard",
    element: (
      <PrivateRoute>
        <Dashboard />
      </PrivateRoute>
    ),
    children: [
      {
        path: "drivers",
        element: (
          <PrivateRoute>
            <Drivers />
          </PrivateRoute>
        ),
      },
      {
        path: "championships",
        element: (
          <PrivateRoute>
            <Championships />
          </PrivateRoute>
        ),
      },
      {
        path: "/dashboard/championships/manage/:championshipId", // Dynamic route for managing a specific championship
        element: (
          <PrivateRoute>
            <ManageChampionships />
          </PrivateRoute>
        ),
      },
    ],
  },
]);

Here's the page with the navigate function

import { useNavigate } from "react-router-dom"; // Import useNavigate


  // Navigate to the manage championship page
  const handleManage = (championshipId) => {
    navigate(`/dashboard/championships/manage/${championshipId}`); // Navigate to the manage championship page
  };

  return (

                    {/* Manage Button - Navigate to ManageChampionships Page */}
                    <button
                      onClick={() => handleManage(champ.id)}
                      className="bg-green-600 px-3 py-1 rounded-md text-sm hover:bg-green-700 transition mr-2"
                    >
                      Manage
                    </button>