navigate does not obey Router basepath

I set a basepath for Router like below

<Location> {({ location }) => ( <PageTransitionGroup> <CSSTransition key={location.key} classNames="fade" timeout={100}> <PageRouterBlock location={location} basepath="/web"> {props.children} </PageRouterBlock> </CSSTransition> </PageTransitionGroup> )} </Location> and my routers <FadeTransitionRouter> <ProtectedRoute path="/" default component={Home} /> <ProtectedRoute path="/home" component={HomePage} /> <PublicRoute path="/login" component={LoginPage} /> </FadeTransitionRouter>

I redirect one page to another page using navigate component import { navigate } from "@reach/router"; navigate("/home");

It should redirect to web/home but currently, the Home link breaks(it redirects to /home).

Should I add a base path for all the navigate?