Repository: storybook
Issue: SB geting stuck when using global decorator with StyleSheetManager
Labels: bug,needs triage

**Describe the bug**
Storybook getting stuck for some seconds when using styled component StyleSheetManager as global decorator within preview.js **AND** a story, where story args and component props with children will be used.

The resulting effect between a working and a stucking story is, that the working story uses the skipJsxRender and the hanging story the jsxDecorator with many prettyPrint calls.

**To Reproduce**
```
npm i -D react react-dom @babel/core styled-components
npx sb init --builder webpack5
```
modify ./storybook/preview.js
```
import { StyleSheetManager } from 'styled-components';

export const decorators = [
  (Story) => (
    <StyleSheetManager>
        <Story/>
    </StyleSheetManager>
  ),
];

export const parameters = {
  actions: { argTypesRegex: "^on[A-Z].*" },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
}
```

use new stories Demo.stories.jsx
```
import React from 'react';

const DemoComponent = ({ otherChildren, children }) => (
    <>
        {otherChildren}
        {children}
    </>
);

export default {
    title: 'Components/Demo',
    component: DemoComponent,
};

// OK
const DemoTemplateA = (_args) => <DemoComponent>{[<div>DemoA</div>]}</DemoComponent>;
export const DemoA = DemoTemplateA.bind({});

// OK
const otherChildren = [<div>DemoB</div>];
const DemoTemplateB = (_args) => <DemoComponent otherChildren={otherChildren} />;
export const DemoB = DemoTemplateB.bind({});

// OK
const DemoTemplateC = () => <DemoComponent otherChildren={[<div>DemoC</div>]} />;
export const DemoC = DemoTemplateC.bind({});

// this getting stuck - only the _args parameter was added in comparison with DemoC
const DemoTemplateD = (_args) => <DemoComponent otherChildren={[<div>DemoD</div>]} />;
export const DemoD = DemoTemplateD.bind({});
```

start storybook
```
npm run storybook
```
and selecting the DemoD story.

**System**
```
Environment Info:

  System:
    OS: Windows 10 10.0.19042
    CPU: (8) x64 Intel(R) Core(TM) i7-8650U CPU @ 1.90GHz
  Binaries:
    Node: 16.9.1 - C:\Program Files\nodejs\node.EXE
    npm: 7.21.1 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.19041.1266.0), Chromium (97.0.1072.76)
  npmPackages:
    @storybook/addon-actions: ^6.4.18 => 6.4.18
    @storybook/addon-essentials: ^6.4.18 => 6.4.18
    @storybook/addon-links: ^6.4.18 => 6.4.18
    @storybook/builder-webpack5: ^6.4.18 => 6.4.18
    @storybook/manager-webpack5: ^6.4.18 => 6.4.18
    @storybook/react: ^6.4.18 => 6.4.18
```

**Additional context**
performance measurement of DemoTemplateC 
<img width="963" alt="image" src="https://user-images.githubusercontent.com/2435136/152299472-42a41f65-8cf3-4e4f-9e65-136314909db5.png">

performance measurement of DemoTemplateD
![image](https://user-images.githubusercontent.com/2435136/152299635-80be85a7-d641-447e-9e95-9a61467ead53.png)
<img width="961" alt="image" src="https://user-images.githubusercontent.com/2435136/152299707-b4136827-0e0b-49c5-a747-d5ab07eb5208.png">

If you use a more complex global style configuration like we did, it breaks completely (GlbalStyle, Fonts, ..., Zindex using _createGlobalStyle_).
```
<StyleSheetManager disableVendorPrefixes>
        <ThemeProvider theme={defaultTheme}>
            <GlobalStyle />
            <Fonts />
            <Colors />
            <Picker />
            <Zindex />
            {children}
        </ThemeProvider>
    </StyleSheetManager>
```