Как отрендерить семантическую страницу и иметь контроль над состояниями компонентов
К примеру у меня есть типичная разметка страницы:
<body>
<header>
</header>
<main class="page-main">
<section class="timer container"></section>
</main>
<footer class="footer"></footer>
</body>
React не дает отрендерить напрямую в body, поэтому я пытаюсь создать три компонента и отрендерить каждый в хедер, мейн и футер. Но к примеру я хочу иметь в хедере кнопку, которой я бы мог менять состояния у всех компонентов. На выходе у меня получается что-то вроде: HeaderApp MainApp FooterApp И каждый рендерится в отдельый контейнер. Как это можно реализовать?