using tsx and mdx in storybook react

Question

I am trying to achieve this:

but with my stories broken down into mdx and tsx files.

So far My mdx file looks like this:

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" />

And this works. But doesn't have type checking, code hinting and so on. So I wanted to break it down into tsx and mdx like so:

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" />

But this caused the docs to look like this:

So I'm missing the entire second component description and config. How can I make it appear in this setup?

When I change the heading in mdx, it doesn't update in storybook. So the storybook doesn't actually see/accept this mdx as docs. What am I missing?