Двойной стиль рендеринга на SSR

Question

Я сейчас разрабатываю CMS с Гэтсби и эмоциями. Стиль дублируется, даже если выделен один и тот же класс.

Я думаю, что есть несколько решений (например, использование post CSS), но я бы хотел выяснить причину этого.

import React from 'react';
import PropTypes from 'prop-types';
import tw from 'twin.macro';
import styled from '@emotion/styled';
const StyledComponent = styled.section``;
const Section = ({ component: Component, children, ...other }) => (
  <StyledComponent css={tw`bg-white`} {...other}>
    {children}
  </StyledComponent>
);

Вот результат в браузере (CSS Стиль буквально продублирован)

Данная проблема возникает только в производственной среде.