styled-components не будет работать с несколькими ReactDOM.render

Question

Итак, я создаю приложение RubyOnRails с React во внешнем интерфейсе. У меня есть несколько микро-интерфейсов, и я отображаю каждый из них отдельно. Например:

index.html.erb

<div id="app-header" />
<div id="app-content" />

Header.jsx

import React from 'react';
import styled from 'styled-components';
import ReactDOM from 'react-dom';

const StyledHeader = styled.div`
   // ...
`;

const Header = () => {
  return <StyledHeader>...</StyledHeader>;
}

document.addEventListener('DOMContentLoaded', () => {
  ReactDOM.render(
    <Header />, 
    document.getElementById('app-header'));
});

App.jsx.jsx

import React from 'react';
import styled from 'styled-components';
import ReactDOM from 'react-dom';

const StyledApp = styled.div`
   // ...
`;

const App = () => {
  return <StyledApp>...</StyledApp>;
}

document.addEventListener('DOMContentLoaded', () => {
  ReactDOM.render(
    <App />, 
    document.getElementById('app-content'));
});

проблема в том, что похоже на styleled-компоненты, которые визуализируют последние стили из ReactDOM.render.

Так что в этом случае стиль будет только app-content. Если я удаляю его, тогда вводится app-header. Я проверил элементы, и похоже, что стили из app-header отсутствуют в DOM, когда присутствует app-content. Это как переопределение.

Я не могу сделать содержимое и заголовок для одного корневого компонента, потому что содержимое не всегда React.

Есть ли способ заставить стили работатьне нарушая эту структуру?