React SSR - React Router Dom staticContext undefined on the client

I am creating a blogging application using React with Server Side Rendering functionality. I create the application using Create React App.

I encounter an issue where my data coming from the server is rendered for a second then gone after react takes over the rendering process. I am using React Router Dom to pass the data from the server to the client react. Basically I am following this tutorial to create the application https://www.youtube.com/watch?v=NwyQONeqRXA but the video is lacking some information like getting the data on the API. So I reference this repository for getting the data on the API https://github.com/tylermcginnis/rrssr

Base on resources I gathered I ended up the following codes.

server.js

import express from "express";
import fs from "fs";
import path from "path";
import { StaticRouter, matchPath } from "react-router-dom";

import React from "react";
import ReactDOMServer from "react-dom/server";
import serialize from "serialize-javascript";
import App from "../src/App";
import routes from "../src/routes";

const app = express();

const PORT = 3001;

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

app.get("*", (req, res, next) => {
    // point to the html file created by CRA's build tool
    const filePath = path.resolve(__dirname, "..", "build", "index.html");

    fs.readFile(
        path.resolve(filePath),
        "utf-8",
        (err, html_data) => {
            if (err) {
                console.error(err);
                return res.status(500).send(`Some error happened: ${err}`);
            }

            const activeRoute =
                routes.find(route => matchPath(req.url, route)) || {};

            const promise = activeRoute.fetchInitialData
                ? activeRoute.fetchInitialData(req.path)
                : Promise.resolve();

            promise
                .then(rawData => {
                    console.log('rawData', rawData[0]);

                    const context = { posts: rawData };

                    const markup = ReactDOMServer.renderToString(
                        <StaticRouter location={req.url} context={context}>
                            <App />
                        </StaticRouter>
                    );

                    return res
                        .status(200)
                        .send(
                            html_data
                                .replace(
                                    '<div id="root" class="container-fluid"></div>',
                                    `<div id="root" class="container-fluid">${markup}</div>`
                                )
                                .replace(
                                    "__INITIAL_DATA__={}",
                                    `__INITIAL_DATA__=${serialize(rawData)}`
                                )
                        );
                })
                .catch(next);
        }
    );
});

app.listen(PORT, () => {
    console.log(`App launched at http://localhost:${PORT}`);
});

Node JS Server entry point index.js

require("ignore-styles");

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

require("./server");

Client react index.js

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import { BrowserRouter } from "react-router-dom";
import "bootstrap/dist/css/bootstrap.css";
import "./index.css";
import "./fonts/VarelaRound-Regular.ttf";

ReactDOM.hydrate(
    <BrowserRouter>
        <App post_data={window.__INITIAL_DATA__} />
    </BrowserRouter>,
    document.getElementById("root")
);

Clieant react App.js

import React, { Component } from "react";

import "./App.css";

import { Route, Link, Redirect, Switch } from "react-router-dom";
import routes from "./routes";


class App extends Component {
    render() {
        return (
            <div>
                <Switch>
                    {routes.map(
                        ({ path, exact, component: Component, ...rest }) => (
                            <Route
                                key={path}
                                path={path}
                                exact={exact}
                                render={props => (
                                    <Component {...props} {...rest} />
                                )}
                            />
                        )
                    )}
                </Switch>
            </div>
        );
    }
}

export default App;

When I am trying to output the data on the component it was gone and now staticContext pass from the server is undefined. What seems to be the issue here? Am I missing some configuration or library?

import React from "react";

export default class Home extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            posts: this.props.staticContext
                ? this.props.staticContext.posts
                : []
        };
        console.log("constructor", this.props); // STATIC CONTEXT UNDEFINED ON THIS OUTPUT
    }
    componentDidMount() {
        console.log("componentDidMount", this.props);// STATIC CONTEXT UNDEFINED ON THIS OUTPUT
    }

}