React Router v6 Link component not changing the page at root url

I have created a Link on a Post that links to the Post Page. When the link is clicked with the url at '/' the link doesn’t work correctly, it displays the correct link in the url e.g. http://localhost:3000/posts/624a771b42211849eaada885 but the page doesn’t redirect, the only way it works is if I refresh the page. However, if I am on my Popular Posts page the link works correctly. To be clear the Post is in a component called Posts which displays all of the Posts. The Posts component is a shared component across many components, such as Home page ('/') and Popular Posts (/popular) the link works in all other pages except for when at '/'

Below is the Link.

<Link to={`/posts/${_id}`}>
  <h2 className='post-title'>{title}</h2>
</Link>

My routes are set up with the following:

<Route element={!token ? <Navigate replace to='/login' /> : <Navbar />}>
  <Route
    path='/'
    element={<Home />}
  >
    <Route
      path='/popular'
      element={<Popular />}
    />
    <Route 
      path='/posts/:postId' 
      element={<PostPage />} 
    />
  </ Route>
</Route>

and finally, in my Home.js I have this:

<div className='home-posts-container'>
  {window.location.pathname === '/' ? <PopularPosts /> : <Outlet />}
</div>