I followed the react router upgrade guide from v6 to v7, but while doing this I broke the CSS. Tabs type is Link[].

My problem is, when I open dashboard it starts, with Stammdaten its okay. But when I click Fotos, URL is changing but class which is aria-selected="false" still stays false for Fotos tab.

If I delete extra relative segments (..), tabs goes infinite loop, but if I change it manually it renders the page and also the line under the Fotos tab. It should show like the 2nd screenshot. I don't understand why that is.

            <Page
              title="Unterkunft"
              tabs={[
                { to: "../profile", text: "Stammdaten" },
                { to: "../photos", text: "Fotos" },
                { to: "../address", text: "Adresse" },
                { to: "../amenities", text: "Ausstattung" },
                { to: "../topics", text: "Themen" },
                { to: "../payout-profiles", text: "Zahlungsprofile" },
                { to: "../languages", text: "Sprachen" },
              ]}
            >

interface PageTabsProps {
  tabs: Link[];
  onChange: (index: number) => void;
}

const PageTabs = ({ tabs, onChange }: PageTabsProps) => {
  const location = useLocation();

  const selectedIndex = useMemo(
    () =>
      tabs.findIndex((t) => location.pathname.includes(`/${toToString(t.to)}`)),
    [location.pathname],
  );

  return (
    <Tab.Group selectedIndex={selectedIndex} onChange={onChange}>
      <Tab.List className={styles.tabs}>
        {tabs.map((link) => (
          <Tab
            key={toToString(link.to)}
            className={styles.tab}
            disabled={link.disabled}
          >
            {link.showWarning && (
              <Icon glyph={SvgWarning} className={styles.warningIcon} />
            )}
            {link.text}
          </Tab>
        ))}
      </Tab.List>
    </Tab.Group>
  );
};