How to keep navigation component state in sync with active route?

[joshua-lehmann]

Hi
I am using the antD Menu component for my navigation together with TanStack Router. It works when you click the navigation but if you open the site already with a specific link, it does not work, since the antd menu state is not in sync with the active route. The only solution I found was to use const currentPath = router.state.matches[router.state.matches.length - 1].pathname; to set my initial state manually, so that it is in sync. Here you find my simple example on CodeSandbox: https://codesandbox.io/s/antd-menu-tanstack-router-ddns67 you can test the behaviour by going for example to https://ddns67.csb.app/about
Without below code, it will not work:

  const currentPath = router.state.matches[router.state.matches.length - 1].pathname;
  // the current needs to be in sync with the active route
  const [current, setCurrent] = useState(currentPath.substring(1) || "/");

What would be the right approach to use a Menu component that has state together with TanStack Router?
Any suggestions are welcome.