styled-components throw `invalid hook call error` about gatsby-mdx HOT 4 CLOSED

import React from 'react';
import MDX from 'mdx-scoped-runtime';
import { ThemeProvider } from 'styled-components';

import CoolQuote from './ui/CoolQuote';

const Layout = ({ children }) => (
  <ThemeProvider theme={{ colors: { fourthLight: 'mediumseagreen' } }}>{children}</ThemeProvider>
);

const initialMdx = `import CoolQuote from "./ui/CoolQuote";
import Layout from "./Layout";

export default Layout

<CoolQuote>
  <i>TEST</i>
</CoolQuote>
`;

export default class App extends React.Component {
  state = { mdx: initialMdx };

  render() {
    const { mdx } = this.state;
    return (
      <div style={{ width: 500, margin: '40px auto' }}>
        <textarea
          style={{ width: '100%', height: 130 }}
          value={mdx}
          onChange={(e) => this.setState({ mdx: e.target.value })}
        />
        <MDX
          allowedImports={{
            './ui/CoolQuote': { ImportDefault: CoolQuote },
            './Layout': { ImportDefault: Layout },
          }}
        >
          {mdx}
        </MDX>
      </div>
    );
  }
}

import { MdxControl, setupPreview } from 'netlify-cms-widget-mdx';
import remarkEmojiPlugin from 'remark-emoji';

import CoolQuote from '../components/cool-quote';
window.CMS.registerWidget(
  'mdx',
  MdxControl,
  setupPreview({
    allowedImports: {
      '../../components/cool-quote': { ImportDefault: CoolQuote }
    },
    mdPlugins: [remarkEmojiPlugin],
  })
);

window.CMS.registerWidget(
  'mdx',
  MdxControl,
  setupPreview({
    scope: {
      CoolQuote: ({ children, ...props }) => (
        <CoolQuote {...props}>
          {children}
        </CoolQuote>
      )
    },
    components: {},
    allowedImports: {},
    mdPlugins: [remarkEmojiPlugin],
  })
);

// This webpack config is used to compile the JS for the CMS
const path = require('path')
const ExtractTextPlugin = require('extract-text-webpack-plugin')

const production = process.env.NODE_ENV === 'production'
const mode = production ? 'production' : 'development'
// const mode = 'production'
console.log(`Building CMS in ${mode} mode`)

module.exports = {
  entry: './cms.js',
  output: {
    filename: 'cms.bundle.js',
    path: path.resolve(__dirname, '../public/admin/'),
  },
  mode,
  stats: { warnings: false, children: false },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env', '@babel/preset-react'],
          plugins: [
            'babel-plugin-styled-components',
            '@babel/plugin-proposal-object-rest-spread',
            '@babel/plugin-proposal-class-properties'
          ],
        },
      },
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          use: [
            { loader: 'css-loader', options: { importLoaders: 1 } },
            'postcss-loader',
          ],
        }),
      },
    ],
  },
  plugins: [
    new ExtractTextPlugin({
      filename: 'cms.bundle.css',
    }),
  ],
}