The url shows the correct route but the component is not rendering. I am not getting any error whatsoever.

Relevant routing code:

<Route
        path="/housing"
        element={<Housing supabase={supabase} setIsLogged={setIsLogged} />}
      >
        <Route
          path="water"
          element={
            <ServiceDetails supabase={supabase} servicecategory="water" />
          }
        ></Route>
        <Route
          path="electrician"
          element={
            <ServiceDetails supabase={supabase} servicecategory="electrician" />
          }
        ></Route>
        <Route
          path="plumber"
          element={
            <ServiceDetails supabase={supabase} servicecategory="plumber" />
          }
        ></Route>
        <Route
          path="maid"
          element={
            <ServiceDetails supabase={supabase} servicecategory="maid" />
          }
        ></Route>
      </Route>

Relevant link code(Housing.jsx):

<div className="sections">
          <Link to="/housing/">
            <div className="housebutton butt">
              <i className="fa-solid fa-newspaper"></i>
              <div className="buttonname">
                <p>Schemes</p>
                <p className="hindisectionname">योजनाएं</p>
              </div>
            </div>
          </Link>
          <Link to="/housing/water">
            <div className="housebutton butt">
              <i className="fa-solid fa-glass-water-droplet"></i>
              <div className="buttonname">
                <p>Water</p>
                <p className="hindisectionname">पानी</p>
              </div>
            </div>
          </Link>
          <Link to="/housing/electrician">
            <div className="housebutton butt">
              <i className="fa-solid fa-plug"></i>
              <div className="buttonname">
                <p>Electrician</p>
                <p className="hindisectionname">बिजली मिस्त्री</p>
              </div>
            </div>
          </Link>
          <Link to="/housing/plumber">
            <div className="housebutton butt">
              <i className="fa-solid fa-shower"></i>
              <div className="buttonname">
                <p>Plumber</p>
                <p className="hindisectionname">प्लंबर</p>
              </div>
            </div>
          </Link>
          <Link to="/housing/maid">
            <div className="housebutton butt">
              <i className="fa-solid fa-person-dress"></i>
              <div className="buttonname">
                <p>Maids</p>
                <p className="hindisectionname">नौकरानी</p>
              </div>
            </div>
          </Link>
        </div>

I tried console.log in ServiceDetails.jsx but nothing is logging. Searched google,chatgpt nothing helped. I rechecked all the routing code and all seems fine. I don’t know what the problem is.