How to hide the parent component data when going nested in the component?

If you want ListRooms2 to be rendered on the nested "/listrooms/listrooms2" path and not render ListRooms at the same time then move ListRooms to its own index route to only be rendered when the path is "/listrooms".

<Routes>
  <Route path="/" element={<MainMenu />}>
    <Route index element={<Home />} />
    <Route path="/listrooms">
      <Route index element={<ListRooms />} />
      <Route path="listrooms2" element={<ListRooms2 />} />
    </Route>
    <Route path="/login" element={<Login />} />
    <Route path="*" element={<ErrorPage />} />
  </Route>
</Routes> 

Alternatively you could unnest the routes, e.g. render each individually, using the complete absolute path.

<Routes>
  <Route path="/" element={<MainMenu />}>
    <Route index element={<Home />} />
    <Route path="/listrooms" element={<ListRooms />} />
    <Route path="/listrooms/listrooms2" element={<ListRooms2 />} />
    <Route path="/login" element={<Login />} />
    <Route path="*" element={<ErrorPage />} />
  </Route>
</Routes>