Main component tab next to subcomponent tabs keying off displayName

[Smolations]

Describe the bug
When specifying subcomponents for a story (in CSF) the main component's tab shows the component's displayName instead of what's parsed from the default-exported title.

To Reproduce
Create a component which contains subcomponents, and assign the main component a displayName. When viewing the Docs tab, the displayName will show in the first (farthest left) tab.

/** MainComponent/index.js */

import MainComponentContainer from './MainComponentContainer'; 
//--> MainComponentContainer.displayName = 'MainComponentContainer';

import SubComponent from './SubComponent';
// ...

const MainComponent = MainComponentContainer;

MainComponent.SubComponent = SubComponent;
// ...

export {
  MainComponent,
};


/** MainComponent/MainComponent.stories.js */

export default {
  title: 'Components/MainComponent',
  component: MainComponent,
  subcomponents: {
    'MainComponent.SubComponent': MainComponent.SubComponent,
    // ...
};

I would expect to see "MainComponent" in the first tab. Instead I see, "MainComponentContainer."

System

Environment Info:

  System:
    OS: macOS 10.15.7
    CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
  Binaries:
    Node: 10.18.0 - ~/.nvm/versions/node/v10.18.0/bin/node
    Yarn: 1.22.0 - ~/.yarn/bin/yarn
    npm: 6.13.4 - ~/.nvm/versions/node/v10.18.0/bin/npm
  Browsers:
    Chrome: 90.0.4430.85
    Firefox: 83.0
    Safari: 14.0.3
  npmPackages:
    @storybook/addon-a11y: 6.1.21 => 6.1.21 
    @storybook/addon-essentials: 6.1.21 => 6.1.21 
    @storybook/addon-knobs: 6.1.21 => 6.1.21 
    @storybook/addon-links: 6.1.21 => 6.1.21 
    @storybook/addons: 6.1.21 => 6.1.21 
    @storybook/react: 6.1.21 => 6.1.21 
    @storybook/source-loader: 6.1.21 => 6.1.21 

Additional context
I actually raised this issue in #9444. It was determined to be a bug, but then was marked as fixed, even though the "solution" was only demonstrated with MDX components. As I use CSF, the bug persists.

[randak]

As a workaround, have you tried simply overriding your component's displayName inside of your story file? I've had success doing that for a similar issue.

[Smolations]

@randak There are surely workarounds, but overriding that property is not a pattern I want to introduce to my team's codebase. 😋

We use displayName, in addition to its debugging benefits, for various targeting functions in composed components as a form of identity. Given that this property is static, it could easily affect other components and/or stories.

[shilman]

We’re cleaning house! Storybook has changed a lot since this issue was created and we don’t know if it’s still valid.

Please open a new issue referencing this one if:

• this is still a problem in SB 7.x
• you can provide a consistent reproduction in 7.x (at https://storybook.new/ or per repro docs).