[Bug]: Code of React components showing as <forwardRef>

[felipefialho]

Describe the bug

I'm using the generated React components of Stencil Output React inside a Storybook instance running with React, everything works perfectly but when I click to check the component code it appears as follows:

<forwardRef>
  Button
</forwardRef>

The correct view should be:

<MyButton>
  Button
</MyButton>

I haven't found anything that could help me with this, especially since these wrappers are automatically generated by the Stencil and I have no way of modifying the output.

Can anyone help me?

To Reproduce

No response

System

Environment Info:
  System:
    OS: macOS 13.2.1
    CPU: (8) x64 Apple M1 Pro
  Binaries:
    Node: 18.13.0 - ~/.nvm/versions/node/v18.13.0/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 8.19.3 - ~/.nvm/versions/node/v18.13.0/bin/npm
  Browsers:
    Chrome: 111.0.5563.64
    Firefox: 109.0.1
    Safari: 16.3
  npmPackages:
    @storybook/addon-a11y: ^7.0.1 => 7.0.2 
    @storybook/addon-docs: ^7.0.1 => 7.0.7 
    @storybook/addon-essentials: ^7.0.1 => 7.0.7 
    @storybook/addon-mdx-gfm: ^7.0.2 => 7.0.2 
    @storybook/addons: ^7.0.1 => 7.0.2
    @storybook/preset-typescript: ^3.0.0 => 3.0.0 
    @storybook/react: ^7.0.7 => 7.0.7 
    @storybook/react-webpack5: ^7.0.1 => 7.0.7 
    @storybook/theming: ^7.0.1 => 7.0.2

Additional context

[tassioFront]

I got the same

[Prasad-mutnale]

@felipefialho I want to work on this issue. i can solve this issue please assign me.

[binomialstew]

You might be able to get the component name to display correctly in the story source by setting Component.displayName in the story.

[yannbf]

Hey @felipefialho thanks for reporting the issue. It will be fixed in the next patch release of Storybook 8!

Antes tarde do que nunca 🤞!