'Reactjs nested routes is not redirect to child screen

At menu, I have Albums. If user click the Albums, AlbumsPage(All of Album) will show. If user click the Album, AlbumPage will show. So I want my Albums menu is still selected.

But If I click Album, route is not working. Still showing AlbumsPage. I don't see no error. What is wrong with my nested route?

Paths

const paths = {
  home: "/",

  albums: "/albums",
  getAlbums: () => `/albums`,
  album: "album/:albumId",
  getAlbum: (albumId) => `album/${albumId}`,
};

export default paths;

Rotes

  <Routes>
    <Route path={paths.albums} element={<AlbumsPage />}>
      <Route path={paths.album} element={<AlbumPage />}></Route>
    </Route>
  </Routes>


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source