HELP ! Impossible to operate in SSR correctly

[SanNic20]

Hello everyone, here's my problem: I'm trying to set up SSR on a project that works perfectly with SPA. Once the SSR is in place, it works, but only halfway, let me explain. When I go to the main page "/" http://localhost:3000/ the page is displayed correctly, then if from the main page I go to a child page, it still seems to work. But if I refresh the child page from the browser (F5) or go directly to the child page without going to the main page, I get 2 pages displayed one below the other.

To understand what I'm talking about, here's my route configuration (for your information, I also use the outlet function in my main layout) :

import Layout from '../layouts';

const Loadable = (Component) => (props) => {
  return (
    <Suspense fallback={<LoadingScreen />}>
      <Component {...props} />
    </Suspense>
  );
};

export default function Router() {
  return useRoutes([
    {
      path: '/',
      element: <Layout />,
      children: [
        { element: <Home />, index: true },
        { path: 'login', element: <Register /> },
        { path: 'contact', element: <Contact /> },
        { path: '*', element: <NotFound /> },
      ],
    },
  ]);
}

const Home = Loadable(lazy(() => import('../pages/Home')));
const Login = Loadable(lazy(() => import('../pages/Login')));
const Contact= Loadable(lazy(() => import('../pages/Contact')));
const NotFound= Loadable(lazy(() => import('../pages/NotFound')));

So when I try to go directly to http://localhost:3000/login I get the "Home" page and below it the "Login" page. This behavior occurs on all children's routes. Why is the "Home" page loaded every time I go to a child route?

What am I doing wrong?

On the client side, I use BrowserRouter :

ReactDOM.hydrateRoot(
  document.getElementById('root'),
  <ApolloProvider client={client}>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </ApolloProvider>
);

On the server side, I use StaticRouter :

const serverRenderer = () => async (req, res) => {
  fs.readFile(path.resolve(__dirname, '../../build/index.html'), 'utf8', async (err, data) => {
    if (err) {
      return res.status(500).send('Internal Server Error');
    }

    const client = new ApolloClient({
      ssrMode: true,
      link: createHttpLink({
        uri: process.env.GRAPHQL_URL,
        credentials: 'same-origin',
        fetch,
      }),
      cache: new InMemoryCache(),
    });

    const ToRender = () => {
      return (
        <ApolloProvider client={client}>
          <StaticRouter location={req.url}>
            <App />
          </StaticRouter>
        </ApolloProvider>
      );
    };

    const getDataFromTree = (tree, context = undefined) => {
      return getMarkupFromTree({
        tree,
        context,
        // eslint-disable-next-line @typescript-eslint/no-var-requires
        renderFunction: ReactDOMServer.renderToString,
      });
    };

    let html;
    try {
      html = await getDataFromTree(<ToRender />);
    } catch (error) {
      console.log(error);
      return res.status(500).send('Internal Server Error');
    }

    const initialState = client.extract()
    const results = data.replace('<div id="root"></div>', `<div id="root">${html}</div>`)
    .replace(
        '</body>',
        `</body><script>window.__APOLLO_STATE__=${JSON.stringify(initialState).replace(
            /</g,
            '\\u003c'
        )}</script>`
    )

    res.send(results);
  });
};

However, I have based myself on the official documentation Server Side Rendering

I'd like to make one more important point. I'm currently using version 6.4.3 of react-router-dom. But if I update to the latest version (6.12.1), it's even worse! With the latest version, it's impossible to go to a child page from the main page, although the URL in the browser changes, but doesn't refresh, so I have to refresh the page myself with F5. But then, I still have the same problem with my 2 pages being displayed.

I've been racking my brain for days, but I can't find a solution. Do you have any idea what I'm doing wrong? Thank you in advance for your help and sorry for my english. Best regards.