How to display a nested Vue component in MDX?

Question

I would like to display a nested Vue component in MDX with Storybook 7. I can successfully display a single component but if I pass a component with a child (Tab) it fails.

import {Canvas, Meta} from '@storybook/blocks';

import * as TabsStories from './Tabs.stories';
import Tabs from "@/components/tabs/Tabs.vue";
import Tab from "@/components/tabs/Tab.vue";

<Meta of={TabsStories}/>

<Tabs selectedKey="component">
    <Tab key="component" label="Test">
        <div>Content</div>
    </Tab>
</Tabs>

Exception

Tabs.mdx:18 Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object.

Check the render method of `MDXContent`.
    at MDXContent (http://localhost:6006/src/stories/tabs/Tabs.mdx?t=1707169327637:44:50)
    at div
    at http://localhost:6006/node_modules/.cache/sb-vite/deps/chunk-6CFCZY2T.js?v=2eb18780:1472:45
    at div
    at http://localhost:6006/node_modules/.cache/sb-vite/deps/chunk-6CFCZY2T.js?v=2eb18780:1472:45
    at DocsPageWrapper (http://localhost:6006/node_modules/.cache/sb-vite/deps/chunk-7MBKT7PT.js?v=2eb18780:847:26)
    at ThemeProvider (http://localhost:6006/node_modules/.cache/sb-vite/deps/chunk-6CFCZY2T.js?v=2eb18780:1498:23)
    at SourceContainer (http://localhost:6006/node_modules/.cache/sb-vite/deps/chunk-7MBKT7PT.js?v=2eb18780:1920:26)
    at DocsContainer (http://localhost:6006/node_modules/.cache/sb-vite/deps/chunk-7MBKT7PT.js?v=2eb18780:2261:24)
    at Docs (http://localhost:6006/node_modules/.cache/sb-vite/deps/chunk-7MBKT7PT.js?v=2eb18780:2338:17)
    at MDXProvider (http://localhost:6006/node_modules/.cache/sb-vite/deps/chunk-UKIQ2HFY.js?v=2eb18780:27:24)
    at ErrorBoundary (http://localhost:6006/node_modules/.cache/sb-vite/deps/chunk-MRQQ2CVV.js?v=2eb18780:49:5)
    at WithCallback (http://localhost:6006/node_modules/.cache/sb-vite/deps/chunk-MRQQ2CVV.js?v=2eb18780:24:23)
_createMdxContent   @   Tabs.mdx:18
MDXContent  @   Tabs.mdx:51
Show 15 more frames

What is the correct method of loading a nested Vue component with MDX?