Styled-компоненты Ошибка StyleSheetManager

Question

Я хочу передать свои стили внутри iframe с этим примером, но я не могу скомпилировать его, у меня всегда одна и та же ошибка. Любые идеи, что я делаю неправильно?

import React from 'react';
import ReactDOM from 'react-dom';
import StyleSheetManager from 'styled-components';
import Frame, {FrameContextConsumer} from 'react-frame-component';

ReactDOM.render(
    <Frame>
        <FrameContextConsumer>
            {
            (frameContext) => (
                <StyleSheetManager target={frameContext.document.head}>
                <React.Fragment>
                    test
                </React.Fragment>
                </StyleSheetManager>
            )
            }
        </FrameContextConsumer>
    </Frame>,
    document.getElementById('content'));

Ошибка:

styled-components.browser.esm.js:232 Uncaught Error: Cannot create styled-component for component: [object Object].
    at new StyledComponentsError (styled-components.browser.esm.js:232)
    at constructWithOptions (styled-components.browser.esm.js:1372)
    at styled (styled-components.browser.esm.js:2262)
    at renderWithHooks (react-dom.development.js:16260)
    at mountIndeterminateComponent (react-dom.development.js:18794)
    at beginWork$1 (react-dom.development.js:20162)
    at HTMLUnknownElement.callCallback (react-dom.development.js:336)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:385)
    at invokeGuardedCallback (react-dom.development.js:440)
    at beginWork$$1 (react-dom.development.js:25780)

пакет. js

"реагировать": "^ 16.12.0", " response-dom ":" ^ 16.12.0 "," webpack ":" ^ 4.35.0 "," webpack-cli ":" ^ 3.2.3 "," styled-components ":" ^ 4.4.1 "," babel-polyfill ":" ^ 6.26.0 "," babel-core ":" ^ 6.26.3 "," babel-loader ":" ^ 7.1.5 "," babel-plugin-styled components ":" ^ 1.10.6 "," babel-preset-es2015 ":" ^ 6.24.1 "," babel-preset-реакции ":" ^ 6.24.1 "," babel-preset-stage-2 ":" ^ 6.24.1 »