Stuck on an issue?

This is my router:

import { createBrowserRouter, Link, makeRouteConfig, Route } from 'found';

export const Router = createBrowserRouter({
    routeConfig: makeRouteConfig(
        <Route path='/'>
            <Route 
                path='/a'
                Component={() => <div>You are on A. Go to <Link to='/b'>B</Link></div>}
            />
            <Route
                path='/b'
                Component={() => <div>You are on B. Go to <Link to='/a'>A</Link></div>}
            />
        </Route>
    )
})

And I am rendering it to the DOM like this:

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
    <Router/>
  </React.StrictMode>
);

I start using the application on the /a path which displays fine. I then click the link which changes the link in the browser’s address bar but does not render the other component. What am I doing wrong? Does this have something to do with React 18? I saw there is an issue open right now regarding React 18 but that was resolved “by miracle” and I am not able to resolve it. Should I try downgrading React?

These are the versions I am using:

"react-dom": "^18.0.0",
"react": "^18.0.0",
"found": "^1.1.1",