I'm upgrading from React router v5 to v6. I have set up some logic in NavAwayModal.tsx to show a modal if user tries to leave with changes on the page. When the user hits 'leave' navigate takes the location.pathname and navigates there. location.pathname = /config2/cofiguration

The problem is that location.pathname is including the basename. When I hit 'leave' the url looks like this "localhost:3000/config2/config2/configuration". Any way I can solve this issue? it should navigate to "localhost:3000/config2/configuration"... Somehow I need to exclude the basename when navigating.

Root.tsx

<BrowserRouter basename="/config2">
  <IntlProvider
    messages={
      LanguageOptions.find((option) => {
        return option.locale === appState.locale;
      })?.fileName
    }
    locale={appState.locale}
    defaultLocale="en"
  >
    <GMThemeProvider>{children}</GMThemeProvider>
  </IntlProvider>
</BrowserRouter>

NavAwayModal.tsx

useEffect(() => {
  if (confirmedNavigation && lastLocation) {
    navigate(lastLocation.location.pathname);
  }
  // eslint-disable-next-line react-hooks/exhaustive-deps
}, [confirmedNavigation, lastLocation]);