Display of Template inside Story not as expected

Describe the bug To Reproduce

I have the following code inside a mdx file:

export const Template = (args) => <Button {...args} />;

<Preview>
  <Story
    name="Interactive"
    args={{ label: "Primary button ", state: "primary" }}
  >
    {Template.bind()}
  </Story>
</Preview>

When I view the relevant Docs page in the browser and click on the “Show code” link, the following is shown:

<MDXCreateElement
  buttonType="button"
  label="Primary button "
  mdxType="Button"
  originalType={() => {}}
  state="primary"
/>

Expected behavior

I expected it to output the following:

<Button label="Primary button" state="primary" />

Screenshots

System:

Environment Info:

  System:
    OS: macOS 10.15.5
    CPU: (8) x64 Intel(R) Core(TM) i7-7920HQ CPU @ 3.10GHz
  Binaries:
    Node: 14.5.0 - /usr/local/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.14.5 - /usr/local/bin/npm
  Browsers:
    Firefox: 78.0.2
    Safari: 13.1.1
  npmPackages:
    @storybook/preset-create-react-app: ^3.1.4 => 3.1.4 
    @storybook/react: ^6.0.0-rc.26 => 6.0.0-rc.26

[marie-maxime]

Looks similar to https://github.com/storybookjs/storybook/issues/11542

I’m guessing this a bug or maybe the doc for controls is not updated, but you can do this as a workaround and it should output the code correctly:

<Preview>
  <Story
    name="Interactive"
    args={{ label: "Primary button ", state: "primary" }}
  >
    {args => <Button {...args} />}
  </Story>
</Preview>

[shilman]

closing as dupe to #11542