Repository: storybook
Issue: [Bug]: Functions as children breaking functionality of `Show Code`
Labels: bug,needs triage

### Describe the bug

Function as component pattern is breaking the `Show Code` functionality in docs, while the `Code` tab in the component page shows the code as expected

> Docs Page
![CleanShot 2023-02-27 at 14 53 33](https://user-images.githubusercontent.com/12672541/221581788-6fff3e27-3e6c-414a-af6a-084699d458f9.png)

> Component Page
![CleanShot 2023-02-27 at 14 53 41](https://user-images.githubusercontent.com/12672541/221581879-9122fd06-f497-4859-a0d7-cb640bba6356.png)

<details>
  <summary> The original code is below: </summary>

```tsx

export const NestedMenu: StoryFn<ComponentProps<typeof Menu>> = (args) => {
  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);

  const handleClick = (
    event: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>
  ) => {
    setAnchorEl(event.currentTarget);
  };

  const handleClose = () => {
    setAnchorEl(null);
  };

  const open = Boolean(anchorEl);

  return (
    <>
      <OpenMenuButton onClick={handleClick} open={open} />
      <Menu
        {...args}
        id="default-menu"
        open={open}
        anchorEl={anchorEl}
        onClose={handleClose}
      >
        <MenuItems>
          <MenuItem onClick={() => null} title="Action 1" />
          <MenuItem title="Action 2">
            {({ nestedMenuProps }) => (
              <Menu
                anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
                transformOrigin={{ vertical: 'top', horizontal: 'left' }}
                {...nestedMenuProps}
              >
                <MenuItems>
                  <MenuItem title="SubItem1" />
                  <MenuItem title="SubItem2" />
                  <MenuItem title="SubItem3">
                    {({ nestedMenuProps }) => (
                      <Menu
                        anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
                        transformOrigin={{
                          vertical: 'top',
                          horizontal: 'left',
                        }}
                        {...nestedMenuProps}
                      >
                        <MenuItems>
                          <MenuItem title="SubItem1" />
                          <MenuItem title="SubItem2" />
                        </MenuItems>
                      </Menu>
                    )}
                  </MenuItem>
                </MenuItems>
              </Menu>
            )}
          </MenuItem>
          <MenuItem title="Action 3" description="Action 3 is awesome" />
        </MenuItems>
      </Menu>
    </>
  );
};
```
</details>

### To Reproduce

Visit the current link with an example of the issue:
https://github.com/konsalex/design-system-newline-course/tree/show-code-issue

Gitpod also: https://gitpod.io#snapshot/e1c732e1-dab7-4d6d-bc0b-944fb51040bd

To run:
```bash
# Install packages
yarn

yarn workspace @newline-ds/storybook storybook
```

### System

```shell
Environment Info:

  System:
    OS: Linux 5.15 Ubuntu 20.04.5 LTS (Focal Fossa)
    CPU: (16) x64 AMD EPYC 7B13
  Binaries:
    Node: 16.19.0 - ~/.nvm/versions/node/v16.19.0/bin/node
    Yarn: 3.2.1 - ~/.nvm/versions/node/v16.19.0/bin/yarn
    npm: 8.19.3 - ~/.nvm/versions/node/v16.19.0/bin/npm
```


### Additional context

_No response_