Duplicate style render on SSR

I'm currently developing CMS with Gatsby and emotion. Style is duplicately generated even same class is allocated.

I think there's multiple of solution(like using postCSS), but I'd like to grasp the cause of it.

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>
);

Here's rendered result on browser(CSS Style is literally duplicated)

Above problem occurs only in production environment.