react-intl language switcher does not update Formattedmessage in grand-child component

Question

So I've started using react-intl in an older react-project (don't judge please).

In index.js I change the state to the selected language:

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import {
    BrowserRouter as Router, Route
} from 'react-router-dom';
import * as serviceWorker from './serviceWorker';

// Data
import Landing from "./components/landing/landing";
import Login from './components/app/auth/login/Login';
import Register from './components/app/auth/register/Register';
import intlEN from 'react-intl/locale-data/en';
import intlDE from 'react-intl/locale-data/de';

import { IntlProvider, addLocaleData } from "react-intl";
import messages_en from "./translations/en.json";
import messages_de from "./translations/de.json";

addLocaleData([...intlEN, ...intlDE]);

let i18nConfig = {
    locale: 'EN',
    messages: messages_en
};

// App
class Root extends Component {
    constructor(props) {
        super(props);
        this.state = { locale: "EN" }
        this.onChangeLanguage = this.onChangeLanguage.bind(this);
    }

    onChangeLanguage(lang) {
        switch (lang) {
            case 'DE': i18nConfig.messages = messages_de; break;
            case 'EN': i18nConfig.messages = messages_en; break;
            default: i18nConfig.messages = messages_en; break;
        }
        this.setState({ locale: lang });
        i18nConfig.locale = lang;
    }

    render() {
        return (
            <Router>
                <Route exact path="/" onChangeLanguage={this.onChangeLanguage} component={Landing} />
                <Route path="/login" onChangeLanguage={this.onChangeLanguage} component={Login} />
                <Route path="/register" render={() => <Register onChangeLanguage={this.onChangeLanguage} />} />
            </Router>
        )
    }
}


ReactDOM.render(
    <IntlProvider locale={i18nConfig.locale} key={i18nConfig.locale} messages={i18nConfig.messages}>
        <Root />
    </IntlProvider>,
    document.querySelector("#root")
)

---

So in the Register component, I provide a formatted message with a function to change the language:

import React, { Component, ProtoTypes } from 'react';
import {FormattedMessage, FormattedHTMLMessage} from 'react-intl';

class Register extends Component {
    render() {
        const { onChangeLanguage } = this.props

        return (
            <div className="container d-flex vh-100 flex-column">
                <button className="btn btn-link" onClick={(param) => onChangeLanguage('EN')}>
                    English
                </button>
                <button className="btn btn-link" onClick={(param) => onChangeLanguage('DE')}>
                    German
                </button>

                <FormattedMessage id="landing.hero.title"></FormattedMessage>
            </div>
        )
    }
}

export default Register

---

The problem is, sadly, it is not updating anything, the formatted message returns only the selected one at page start