React - возможно ли разделить состояние между отдельными приложениями React?

Question

Я написал React-App, и теперь я хочу реализовать Tab-Navigation.

Проблема в том, что мое приложение реакции встроено в Symfony -проект, который использует шаблоны Twig. Так что мое React-приложение живет в templates / dashboard / index. html .twig :

{% block content %}
    <div id="react-app"></div>
{% endblock %}

А вкладка-меню находится в templates / navigation / navbar. html .twig :

<div class="flex-1 px-4 flex justify-between">
    <div id="react-tabs"></div>
</div>

реаги-приложение. js отображает оба приложения.

import React from 'react';
import {render} from 'react-dom';
import {ready} from '../../helper/vanilla-helper'
import ReactTabs from "./ReactTabs";

function ReactApp() {
    return (
        <div className="App p-20 bg-blue-300">
            Blubber
        </div>
    );
}

export default ReactApp;

ready(() => {

    render(
        <ReactApp/>,
        document.getElementById('react-app')
    );

    render(
        <ReactTabs/>,
        document.getElementById('react-tabs')
    );
});

Я провел довольно много исследований в inte rnet о состоянии общего доступа. Но, похоже, все это связано только с общим состоянием внутри ONE ReactJs приложения и между его компонентами.

В моем случае мне нужно разделить состояние между двумя приложениями. Это вообще возможно, или я должен использовать совершенно другой подход к этому?