I am trying to create an addon for storybook that adds a tab to the top of the page, I have it working except that I cannot get it to render an MDX file in the preview area.

The Addon file contains the following JavaScript:

import { MDXProvider } from '@mdx-js/react';
import { addons, types } from '@storybook/addons';
import React from 'react';


addons.register('my-api', (api) => {
  addons.add('my-api/tab', {
    render: () => {
      const Page = api.getCurrentStoryData()?.parameters?.api?.page;

      console.log(
        'md', 
        Page, 
        typeof Page === 'function' ? Page() : undefined
      );

      return (
        <div>
          {
            typeof Page === 'undefined' ?
              <h2>No API setup for this Story.</h2> :
              <MDXProvider><Page /></MDXProvider>
          }
        </div>
      );
    },
  });
});

The above React was taken from this example. My console log outputs the following:

md ƒ result() {
        // eslint-disable-next-line no-eval
        var f = eval("(".concat(sourceSanitized, ")"));
        return f.apply(void 0, arguments);
      } undefined

In the story that I am setting this up with, the page data with looks like below. I import the api and pass it to the parameters. From there the addon gets the data and and should render the file.

import Api from './button.api.mdx';

export default {
  parameters: {
    api: { page: Api }
  }
} as Meta;

I am also getting the following error message:

Uncaught Error: MDXContent(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.

I have also tried removing <MDXProvider> and just did <Page /> which also gives me the same error.