React Server Side Rendering root div empty

Question

The problem is that on the browser my <div id="root"> is always empty. It isn't making server-side rendering right

I have my server.js

import express from "express";
import fs from 'fs'
import path from 'path'
import React from "react";
import { renderToString } from 'react-dom/server';
import App from '../src/App';

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

app.use('/*', (req, res, next) => {
    try {
        fs.readFile(path.resolve('./build/index.html'), 'utf-8', (err, data) => {
            if(err){
                console.log(err)
                return res.status(500).send("Some error happened")
            }
            return res.send(
                data.replace(
                    '<div id="root"></div>', 
                    `<div id="root">${renderToString(<App/>)}</div>`)
            )
        })

    } catch (error) {
        console.error(error);
        return res.status(500).send('Internal Server Error');
    }
});


app.use(express.static(path.resolve(__dirname, '..', 'build')));

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

My index.js on server

// server/index.js
require("ignore-styles");

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

require("./server");

And my Index.js

import React from 'react';
import { hydrateRoot } from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import ReactDOM from "react-dom";

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


reportWebVitals();

Which hydration should I use, I tried some ways to do it