React Router v6.4 (as per major update in official documentation): Child route component not updating when navigating from parent route

Question

I'm encountering an issue with React Router v6 where a child route component () is not updating when navigating from a parent route (~diary) to the child route (~diary/list). Here's an overview of my setup:

Route Configuration:

index.tsx

const router = createBrowserRouter([
  {
    path: "/",
    element: <Root />,
    children: [
      { path: "react", element: <React /> },
      {
        path: "diary",
        element: <Diary />,
        children: [{ path: "list", element: <List /> }],
      },
    ],
  },
]);

Components:

diary.tsx

import { ReactElement } from "react";
import { useNavigate } from "react-router-dom";

export const Diary = (): ReactElement => {
  const navigate = useNavigate();

  return (
    <div>
      <h2>Welcome to Express Diary</h2>
      <p>Record your diary life</p>
      <button onClick={() => navigate("/diary/list")}>
        Open your Express Diary
      </button>
    </div>
  );
};

list.tsx

import { ReactElement } from "react";

export const List = (): ReactElement => {
  return (
    <div>
      <h3>This is the Diary List!</h3>
    </div>
  );
};

Issue:

When navigating from ~diary to ~diary/list, the URL changes correctly, but the component does not update/render. There are no errors in the console, and navigation logic seems correct. I've ensured that all components are correctly imported, and there are no conflicts with styles or components.

Expected Behavior:

When navigating from ~diary to ~diary/list, I expect the component to update/render according to the route change.