How to deploy React app on a server subdirectory with reach-router?

Question

I'm trying to deploy this React app in a subdirectory on a hosted server online and I'm using react-router. I got this to work with react-router by simply changing the homepage in package.json and adding a "basename" parameter in the Router component:

<BrowserRouter basename="/react/lyricsearch">

With reach-router I came across an article saying you can do a similar thing:

<Router basepath="/react/petadoption">

But it doesn't work and the page doesn't load. Whats the way to set it up to work on that url path with reach-router?

  render() {
    return (
      <div>
        <header>
          <Link to="/">Adopt Me!</Link>
          <Link to="/search-params">
            <span aria-label="search" role="img">
              Search
            </span>
          </Link>
        </header>
        <Provider value={this.state}>
          <Router basepath="/react/petadoption">
            <Results path="/" />
            <Details path="/details/:id" />
            <SearchParams path="/search-params" />
          </Router>
        </Provider>
      </div>
    );                     
  }