when MDXCreateElement shows up in storybook

 I've had a frustrating Sprint with Storybook; as the dev who was working on it before put it:

I was trying to make that work - pull the args from prop definition - but wasn't able to get that working […] As I discovered, it could be explained by anything, including position of planets. At least that stable it  felt.   :-)

The Template.bind() method suggested in the docs ends up putting MDXCreateElement rather than the actual JSX component names behind the "Show code" button. Luckily this comment in a github ticket pointed to a way to fix it (even in pure MDX, some of the other suggestions assumed you were in jsx/tsx) by bypassing the bind. 

A sample page I ended up with was

import { Meta } from '@storybook/addon-docs/blocks';
import { Checkbox } from './checkbox.component';
import { useState } from 'react';

import { Canvas, Story, ArgsTable } from '@storybook/addon-docs/blocks';

# Checkbox

<Meta title='Components/Checkbox' component={Checkbox} />

<Canvas>
  <Story name='Example' args={{ label: 'Example' }}>
    {(args) => {
      const [checked, setChecked] = useState(false);
      return (
        <Checkbox
          {...args}
          checked={checked}
          onChange={() => setChecked(!checked)}
        />
      );
    }}
  </Story>
</Canvas>

<ArgsTable story='Example' />

which uses useState to let the pure functional stateless component still do what QA expects it do when a user clicks on it...