[Bug]: show code part shows React.Memo instead of the component name

[leozhao0709]

Describe the bug

When export the react component with memo like this

export default React.memo(Circle);

Then in the doc "show code" part, it shows as this:

In storybook 7, it shows correctly. But after upgrade to 8, then saw this issue.

To Reproduce

create any component and export with React.memo.

System

Storybook Environment Info:

  System:
    OS: macOS 14.4.1
    CPU: (8) arm64 Apple M2
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.10.0 - ~/.nvm/versions/node/v20.10.0/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 10.2.3 - ~/.nvm/versions/node/v20.10.0/bin/npm
    pnpm: 8.15.4 - ~/Library/pnpm/pnpm <----- active
  Browsers:
    Chrome: 123.0.6312.87
    Safari: 17.4.1
  npmPackages:
    @storybook/addon-actions: ^8.0.5 => 8.0.5
    @storybook/addon-essentials: ^8.0.5 => 8.0.5
    @storybook/addon-links: ^8.0.5 => 8.0.5
    @storybook/blocks: ^8.0.5 => 8.0.5
    @storybook/react: ^8.0.5 => 8.0.5
    @storybook/react-vite: ^8.0.5 => 8.0.5
    storybook: ^8.0.5 => 8.0.5
    storybook-addon-deep-controls: ^0.6.1 => 0.6.1

Additional context

No response

[gabrielzevedo]

I had the same problem, I solved it using displayName, eg:

const Button = React.memo(ButtonWithForwardRef)
Button.displayName = 'Button'
export { Button }