Ошибка "Не правильное использование хуков" при serverside рендеринге

подскажите пожалуйста что делать:

у меня есть сервер на express, который должен рендерить компонент App, помещать отрендеренное внутрь html и возвращать его, вот код:

index.js:

require("ignore-styles");

require("@babel/register")({
  ignore: [/(node_module)/],
  presets: ["@babel/preset-env", "@babel/preset-react"],
});

require("./server");

server.js

import express from "express";
import { readFileSync } from "fs";
import { resolve } from "path";

import React from "react";
import { renderToString } from "react-dom/server";
import { StaticRouter } from "react-router-dom/server";

import App from "../frontend/src/App";

const app = express();
const PORT = 8000;

app.get(
  /\.(js|css|map|ico|gif|jpg|png|svg|json)$/,
  express.static(resolve(__dirname, "../frontend/dist/assets"))
);

app.use("*", (req, res) => {
  let indexHTML = readFileSync(
    resolve(__dirname, "../frontend/dist/index.html"),
    { encoding: "utf-8" }
  );

  const appHTML = renderToString(
    <StaticRouter location={req.originalUrl}>
        <App />
      </StaticRouter>
  );x

  indexHTML = indexHTML.replace(
    '<div id="root"></div>',
    `<div id="root">${appHTML}</div>`
  );

  console.log(indexHTML)

  res.contentType("text/html");
  res.status(200);

  return res.send(indexHTML);
});

app.listen(PORT, () => {
  console.log(`started on ${PORT}`);
});

React компонент App:

import React from "react";
import { Route, Routes } from "react-router-dom";

function App() {
  return (
    <div className="container">
      <p>123</p>
      <Routes>
        <Route path="/" element={<p>Main page</p>} />
        <Route path="/posts" element={<p>Posts page</p>} />
      </Routes>
    </div>
  );
}

export default App;

компонент, в котором компонент монтируется в div с тегом 'root':

import React from "react";
import ReactDOM from "react-dom/client";
import { BrowserRouter } from "react-router-dom";
import App from "./App";

ReactDOM.hydrateRoot(
  document.getElementById("root"),
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

Ошибка возникает в файле server.js в указаном ниже коде:

app.use("*", (req, res) => {
  let indexHTML = readFileSync(
    resolve(__dirname, "../frontend/dist/index.html"),
    { encoding: "utf-8" }
  );

  const appHTML = renderToString(
    <StaticRouter location={req.originalUrl}>
        <App />b
      </StaticRouter>
  );x

  indexHTML = indexHTML.replace(
    '<div id="root"></div>',
    `<div id="root">${appHTML}</div>`
  );

  console.log(indexHTML)

  res.contentType("text/html");
  res.status(200);

  return res.send(indexHTML);
});

Ошибка возникает из-за того, что StaticRouter использует useContext, а хуки нельзя использовать не в функциональных компонентах

В документации React-router используется аналогичная конструкция как в файле server.js, но через библиотеку http, но там все аналогично express

Я пробовал обернуть StaticRouter в компонент, но ничего не поменялось.

Вот ошибка, которую я получаю:

Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
TypeError: Cannot read properties of null (reading 'useContext')
    at Object.useContext (/Users/vasiliy/code/tmp/frontend/node_modules/react/cjs/react.development.js:1618:21)
    at useInRouterContext (/Users/vasiliy/code/tmp/frontend/node_modules/react-router/lib/hooks.tsx:86:16)
    at useRoutesImpl (/Users/vasiliy/code/tmp/frontend/node_modules/react-router/lib/hooks.tsx:349:5)
    at useRoutes (/Users/vasiliy/code/tmp/frontend/node_modules/react-router/lib/hooks.tsx:339:10)
    at Routes (/Users/vasiliy/code/tmp/frontend/node_modules/react-router/lib/components.tsx:440:10)
    at renderWithHooks (/Users/vasiliy/code/tmp/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:5662:16)
    at renderIndeterminateComponent (/Users/vasiliy/code/tmp/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:5735:15)
    at renderElement (/Users/vasiliy/code/tmp/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:5950:7)
    at renderNodeDestructiveImpl (/Users/vasiliy/code/tmp/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6108:11)
    at renderNodeDestructive (/Users/vasiliy/code/tmp/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6080:14)
    at renderNode (/Users/vasiliy/code/tmp/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6263:12)
    at renderChildrenArray (/Users/vasiliy/code/tmp/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6215:7)
    at renderNodeDestructiveImpl (/Users/vasiliy/code/tmp/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6145:7)
    at renderNodeDestructive (/Users/vasiliy/code/tmp/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6080:14)
    at renderNode (/Users/vasiliy/code/tmp/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6263:12)
    at renderHostElement (/Users/vasiliy/code/tmp/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:5646:3)
    at renderElement (/Users/vasiliy/code/tmp/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:5956:5)
    at renderNodeDestructiveImpl (/Users/vasiliy/code/tmp/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6108:11)
    at renderNodeDestructive (/Users/vasiliy/code/tmp/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6080:14)
    at renderIndeterminateComponent (/Users/vasiliy/code/tmp/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:5789:7)
    at renderElement (/Users/vasiliy/code/tmp/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:5950:7)
    at renderNodeDestructiveImpl (/Users/vasiliy/code/tmp/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6108:11)
    at renderNodeDestructive (/Users/vasiliy/code/tmp/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6080:14)
    at renderNode (/Users/vasiliy/code/tmp/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6263:12)
    at renderChildrenArray (/Users/vasiliy/code/tmp/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6215:7)
    at renderNodeDestructiveImpl (/Users/vasiliy/code/tmp/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6145:7)
    at renderNodeDestructive (/Users/vasiliy/code/tmp/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6080:14)
    at renderContextProvider (/Users/vasiliy/code/tmp/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:5924:3)
    at renderElement (/Users/vasiliy/code/tmp/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6021:11)
    at renderNodeDestructiveImpl (/Users/vasiliy/code/tmp/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6108:11)
    at renderNodeDestructive (/Users/vasiliy/code/tmp/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6080:14)
    at renderContextProvider (/Users/vasiliy/code/tmp/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:5924:3)
    at renderElement (/Users/vasiliy/code/tmp/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6021:11)
    at renderNodeDestructiveImpl (/Users/vasiliy/code/tmp/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6108:11)
    at renderNodeDestructive (/Users/vasiliy/code/tmp/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6080:14)
    at renderIndeterminateComponent (/Users/vasiliy/code/tmp/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:5789:7)
    at renderElement (/Users/vasiliy/code/tmp/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:5950:7)
    at renderNodeDestructiveImpl (/Users/vasiliy/code/tmp/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6108:11)
    at renderNodeDestructive (/Users/vasiliy/code/tmp/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6080:14)
    at renderIndeterminateComponent (/Users/vasiliy/code/tmp/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:5789:7)
    at renderElement (/Users/vasiliy/code/tmp/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:5950:7)
    at renderNodeDestructiveImpl (/Users/vasiliy/code/tmp/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6108:11)
    at renderNodeDestructive (/Users/vasiliy/code/tmp/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6080:14)
    at retryTask (/Users/vasiliy/code/tmp/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6532:5)
    at performWork (/Users/vasiliy/code/tmp/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6580:7)
    at /Users/vasiliy/code/tmp/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6904:12
    at scheduleWork (/Users/vasiliy/code/tmp/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:78:3)
    at startWork (/Users/vasiliy/code/tmp/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6903:3)
    at renderToStringImpl (/Users/vasiliy/code/tmp/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6977:3)
    at renderToString (/Users/vasiliy/code/tmp/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:7065:10)

Помогите пожалуйста, предоставил всю информацию которую смог.