I am trying to implement nested routes in react router dom v6 and the router keeps sending me back to the default or index route as soon as the is clicked

Router.tsx

          path="organizations"
          element={
            <ProtectedSuperadminPages currentUser={currentUser}>
              <SuperAdminOrganizationsPage />
            </ProtectedSuperadminPages>
          }
        >
          <Route
            index = {true}
            element={
              <ProtectedSuperadminPages currentUser={currentUser}>
                <div>
                  <h1>Smile</h1>
                </div>{" "}
              </ProtectedSuperadminPages>
            }
          ></Route>
          <Route
            path="org"
            element={
              <ProtectedSuperadminPages currentUser={currentUser}>
                <Dummy />
              </ProtectedSuperadminPages>
            }
          ></Route>

          <Route
            index={false}
            path="frog"
            element={
              <ProtectedSuperadminPages currentUser={currentUser}>
                <h1>YO</h1>
              </ProtectedSuperadminPages>
            }
          ></Route>
        </Route>

SuperAdminOrganizationPage.tsx

<Link to = "org">Move to org</Link>
      <Link to = "frog">Move to frog </Link>
      <Outlet />

DEMO https://youtu.be/qaTcbii8Ax0