Cannot write Storybook 7 mdx

Question

When I try and write a docs page using Storybook 7's new way of writing MDX I get this error:

ERROR in ./src/AppMenu.mdx
Module build failed (from ../../node_modules/.pnpm/@[email protected]/node_modules/@storybook/mdx2-csf/loader.js):
Error The 'of' prop is not supported in .stories.mdx files, only .mdx files.

Obviously my filename is AppMenu.mdx and doesn't mention .stories anywhere. My MDX:

import { Story, Controls } from '@storybook/blocks'
import AppMenu from './'
import * as stories from './stories'

# AppMenu

It is cool.

<Story of={stories.Dynamic} />

<Controls of={AppMenu} />

I am using Webpack 5 with CSF all working but I added this loader to give myself MDX support:

      {
        test: /\.mdx$/,
        use: [
          {
            loader: require.resolve('@storybook/mdx2-csf/loader'),
            options: {
              skipCsf: false
            }
          }
        ]
      },

My deps:

    "@storybook/addon-actions": "^7.5.2",
    "@storybook/addon-docs": "^7.5.2",
    "@storybook/addons": "^7.5.2",
    "@storybook/blocks": "^7.5.2",
    "@storybook/builder-webpack5": "^7.5.2",
    "@storybook/cli": "^7.5.2",
    "@storybook/global": "^5",
    "@storybook/mdx2-csf": "^1.1.0",
    "@storybook/react": "^7.5.2",
    "@storybook/react-webpack5": "^7.5.2",
    "@storybook/theming": "^7.5.2",

How do I fix this (without using any of Storybook's automated migration tools)?