Hot reloading for Styled Components and MDX fails

I'm using MDXRemote from next-mdx-remote to load content from local .mdx files into my .tsx files.

I'm also passing components that are created by styled-components into the <MDXRemote/> component.

Here's an example:

// index.tsx
import styled from 'styled-components';

const Main = styled.div`
  display: flex;
  background-color: lightgray;
  padding: 12px;
`

const components = {
  Main
}

const Home: React.FC<any> = (props) => {
  return (
    <div>
      <MDXRemote {...props.source} components={components}/>
    </div>
  )
}

...

The MDX file:

// post.mdx

<Main>

# Hello World!

</Main>

When I run next dev it renders fine the first time, with all the correct styling. But if I make a change that causes hot-reload to occur, I get the following error:

Warning: Prop `className` did not match. Server: "sc-eCstlR hmAVQF" Client: "sc-gsTEea jglPTv"
    at div

I'm guessing this is because of the styled-components lib changing the classname on rebuild. Is there a workaround for this? Otherwise I need to constantly stop and re-run next dev for every change.

I've also tried with @emotion/styled and that doesn't have the same issue. But I would ideally like to not use @emotion/styled because our entire component library is using styled-components.