javascript - usando tsx y mdx en storybook react

Estoy tratando de lograr esto:

pero con mis historias desglosadas en archivos mdx y tsx.

Hasta ahora, mi archivo mdx se ve así:

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

import { Button, Icons } from '../..';

<!-- Components -->

export const ButtonWithoutIcon = (args) => <Button {...args}>Click</Button>;
export const ButtonWithIcon = (args) => (
  <Button icon={<Icons.Activate />} {...args}>
    Click
  </Button>
);

<!-- Content -->

<Meta
  title="Components/Atoms/Button"
  component={Button}
  argTypes={{
    icon: { control: false },
  }}
/>

Button Without Icon

<Preview>
  <Story
    name="Button without icon"
    argTypes={{
      iconPosition: { control: false },
    }}
  >
    {ButtonWithoutIcon}
  </Story>
</Preview>

<Props story="Button without icon" />

---

Button With Icon

<Preview>
  <Story name="Button with icon">{ButtonWithIcon}</Story>
</Preview>

<Props story="Button with icon" />

Y esto funciona. Pero no tiene verificación de tipos, sugerencias de código, y demás. Así que quería desglosarlo en tsx y mdx de esta manera:

tsx

import React from 'react';

import { Button, Icons } from '../..';
import Docs from './Button.stories.mdx';

export const ButtonWithoutIcon = (args: any) => <Button {...args}>Click</Button>;
export const ButtonWithIcon = (args: any) => (
  <Button icon={<Icons.Activate />} {...args}>
    Click
  </Button>
);

export default {
  title: 'Components/Atoms/Button',
  component: Button,
  argTypes: {
    backgroundColor: { control: 'color' },
  },
  parameters: {
    docs: {
      page: Docs,
    },
  },
};

mdx

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

import { Button, Icons } from '../..';

<!-- Content -->

<Meta
  title="Components/Atoms/Button"
  component={Button}
  argTypes={{
    icon: { control: false },
  }}
/>

Button Without Icon

<Preview>
  <Story
    name="Button without icon"
    argTypes={{
      iconPosition: { control: false },
    }}
  >
    {ButtonWithoutIcon}
  </Story>
</Preview>

<Props story="Button without icon" />

---

Button With Icon

<Preview>
  <Story name="Button with icon">{ButtonWithIcon}</Story>
</Preview>

<Props story="Button with icon" />

Pero esto hizo que los documentos se vieran así:

Así que me falta toda la descripción y configuración del segundo componente. ¿Cómo puedo hacer que aparezca en esta configuración?

Cuando cambio el encabezado en mdx, no se actualiza en storybook. Entonces, storybook en realidad no ve/acepta este mdx como documentación. ¿Qué me está faltando?