Repository: storybook
Issue: [Documentation]: Unable to render markdown files converted to mdx files in Docs
Labels: documentation,needs triage

### Describe the problem

Hi,

I am using @storybook/react v7, and I am having a problem to render the documentation of my component in the Docs. I am coming from version 5 where I used to document my components with md files. Due to the deprecation of some libraries, I felt the need to update the version of storybook, so first of all I updated to version 6, where I could still use md files in the Docs tabs. When I am trying to make the same in version 7, I found that in this version I have to use mdx files instead md for Docs, the problem lies that I want to show the content of my markdown file in the Docs. This is what Docs displays when I run the project, what I need is to display the content of my markdown file between the text **Accordion** and the component rendered.

<img width="1171" alt="Screenshot 2024-06-15 at 11 30 39" src="https://github.com/storybookjs/storybook/assets/43805357/7c483236-6b98-45e7-ab69-71a447543462">

This is my package.json

```
{
  "name": "test-ui",
  "version": "1.1.0",
  "scripts": {
    "storybook": "storybook dev -p 9001 -c .storybook -s ./public",
    "build-storybook": "storybook build",
    "test": "jest --no-watchman",
    "test:dev": "jest --watchAll",
    "test:coverage": "jest --no-watchman --coverage",
    "clean-dist": "rm -rf ./dist",
    "build": "npm run clean-dist && npm run sync-assets && NODE_ENV=production babel ./src --out-dir ./dist --copy-files",
    "serve": "NODE_ENV=production node ./server.js ",
    "sync-assets": "./scripts/sync-assets.sh"
  },
  "dependencies": {
    "draft-js": "^0.11.5",
    "express": "^4.18.2",
    "lodash": "^4.17.11",
    "markdown-draft-js": "^2.2.1",
    "moment": "^2.23.0"
  },
  "devDependencies": {
    "@babel/cli": "^7.12.7",
    "@babel/core": "^7.12.7",
    "@babel/plugin-proposal-class-properties": "^7.1.0",
    "@babel/preset-env": "^7.1.6",
    "@babel/preset-react": "^7.0.0",
    "@storybook/addon-a11y": "7.6.10",
    "@storybook/addon-actions": "7.6.10",
    "@storybook/addon-docs": "7.6.10",
    "@storybook/addon-essentials": "7.6.10",
    "@storybook/addon-interactions": "7.6.10",
    "@storybook/addon-links": "7.6.10",
    "@storybook/preset-create-react-app": "7.6.10",
    "@storybook/react": "7.6.10",
    "@storybook/react-webpack5": "^7.6.10",
    "@storybook/testing-library": "^0.2.2",
    "@testing-library/react": "^12.1.2",
    "babel-core": "^7.0.0-bridge.0",
    "babel-jest": "^27.4.6",
    "babel-loader": "^8.0.4",
    "babel-plugin-dynamic-import-node": "^2.3.3",
    "classnames": "^2.3.2",
    "identity-obj-proxy": "^3.0.0",
    "jest": "^27.4.7",
    "markdown-loader": "^4.0.0",
    "prettier": "^1.15.3",
    "prop-types": "^15.6.2",
    "react": "^16.14.0",
    "react-dom": "^16.14.0",
    "regenerator-runtime": "^0.12.1",
    "storybook": "^7.6.10",
    "styled-jsx": "^3.3.0",
    "webpack": "^5.88.1"
  },
  "peerDependencies": {
    "react": "^16.x || ^17.x",
    "styled-jsx": "^3.x"
  },
  "files": [
    "dist/**"
  ],
  "main": "dist",
  "module": "dist",
  "prettier": {
    "singleQuote": true
  },
  "sideEffects": false
}
```

This is my main.js file

module.exports = {
  stories: [
    '../stories/*.stories.js',
    '../src/**/*.stories.js'
  ],

  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-interactions',
    '@storybook/addon-docs',
    '@storybook/addon-a11y'
  ],

  framework: {
    name: '@storybook/react-webpack5',
    options: {}
  },
  features: {
    storyStoreV7: true
  },
  docs: {
    autodocs: true
  }
};


And these are my md file, mdx file and the story file where I am trying to insert the content of mdx file in the Docs 

Markdown file (AccordionMD.md)

-------------------------------------------------------------------------------------------------------------------------
```
# Accordion Component

The Accordion component is a customizable React component that allows you to create collapsible sections of content. It provides a button to toggle the visibility of the content within the accordion.

```javascript
import Accordion from 'carelinx-ui/dist/accordion/Accordion';
```

## Usage

Once you have imported the Accordion component, you can use it in your JSX code as follows:

```jsx
<Accordion title="Accordion Title" variant="primary" tile="T">
  <Accordion.AccordionList>
    <Accordion.AccordionItem
      icon=">"
      onClick={() => console.log('Click')}
      primaryText="Financial support"
      tertiaryText="Invoice #2232"
      secondaryText="20/33/2023"
    />
    <Accordion.AccordionItem
      icon=">"
      onClick={() => console.log('Click')}
      primaryText="Financial support"
      tertiaryText="Invoice #2232"
      secondaryText="20/33/2023"
    />
  </Accordion.AccordionList>
</Accordion>
```

## Props

The Accordion component accepts the following props:

- `title` (string, required): A string representing the title of the accordion.
- `children` (node, required): Content to be displayed within the accordion when it is open.
- `variant` (string): A string indicating the style of the accordion button. Possible values are `primary` (default) and `secondary`.
- `tile` (string): A string to be displayed as a small tile next to the accordion title. It can be used to show additional information or icons.
- `className` (string): Additional CSS class to apply to the accordion container.
- `isOpen` (bool, required): Indicates whether to expand or not the accordion initially.
- `setIsOpen` (function, required): Function that will be triggered when the accordion expands or collapses.

-------------------------------------------------------------------------------------------------------------------------

MDX file (AccordionMDX.mdx)

```
import { Markdown } from '@storybook/blocks';
import AccordionMD from './AccordionMD.md?raw';

<Markdown>{AccordionMD}</Markdown>
```


Story file (accordion.stories.js)

```
import React, { useState } from 'react';
import Accordion from '../src/accordion/Accordion';

import AccordionMD from '../src/accordion/AccordionMD.md';
import names from '../src/icons/utils/names';
import Icon from '../src/icons/Icon';
import { COLORS } from '../src/theme';

import { Markdown } from '@storybook/blocks';

const AccordionDemo = () => {
  const [isOpenPrimary, setIsOpenPrimary] = useState(true);
  const [isOpenSecondary, setIsOpenSecondary] = useState(true);
  const [selectedItem, setSelectedItem] = useState(1);
  const [list, setList] = useState([
    {
      id: 1,
      primary: 'Financial Support',
      secondary: '20/03/2022',
      terciary: 'Invoice ##'
    },
    {
      id: 2,
      primary: 'Financial Support2',
      secondary: '10/03/2022',
      terciary: 'Invoice ##2'
    },
    {
      id: 3,
      primary: 'Financial Support3',
      secondary: '02/03/2022',
      terciary: 'Invoice ##3'
    }
  ]);

  return (
    <div>
      <label>
        This button simulates the case where the elements for an accordion can
        change and it should expand again
      </label>
      <button
        onClick={() => {
          setList([
            {
              id: 2,
              primary: 'Financial Support2',
              secondary: '10/03/2022',
              terciary: 'Invoice ##2'
            },
            {
              id: 3,
              primary: 'Financial Support3',
              secondary: '02/03/2022',
              terciary: 'Invoice ##3'
            }
          ]);
          setIsOpenPrimary(true);
        }}
      >
        Change data for primary Accordion
      </button>
      <br />
      <br />
      <Accordion
        title="Pending Invoices"
        variant="primary"
        tile={list.length}
        isOpen={isOpenPrimary}
        setIsOpen={setIsOpenPrimary}
      >
        <Accordion.AccordionList>
          {list.map((v, i) => (
            <Accordion.AccordionItem
              key={i}
              primaryText={v.primary}
              secondaryText={v.secondary}
              tertiaryText={v.terciary}
              icon={<b>Test</b>}
              isItemSelected={v.id === selectedItem}
              onClick={() => setSelectedItem(v.id)}
            />
          ))}
        </Accordion.AccordionList>
      </Accordion>
      <Accordion
        title="Pending Invoices2"
        variant="secondary"
        isOpen={isOpenSecondary}
        setIsOpen={setIsOpenSecondary}
      >
        <Accordion.AccordionList>
          <Accordion.AccordionItem
            key={0}
            icon={
              <Icon
                name={'eva-chevron-right'}
                size="m"
                color={COLORS.neutral.coolGray700}
              />
            }
            primaryText={'Financial No support'}
            secondaryText={'15/03/2023'}
            tertiaryText={'Invoice #2232'}
            isItemSelected={selectedItem === 4}
            onClick={() => setSelectedItem(4)}
          />
        </Accordion.AccordionList>
      </Accordion>
    </div>
  );
};

export default {
  title: 'Accordion', // Define title for component hierarchy
  component: AccordionDemo,
  docs: {
    // Import markdown content dynamically (optional)
    description: {
      component: AccordionMD
    }
  },
  tags: ['autodocs']
};

const Template = args => <AccordionDemo {...args} />;

export const Default = Template.bind({});
```

Please, can you help me to overcome this issue. I have already read the documentation and I haven't found something which can help me to solve this problem. Maybe I have read something wrong or I misunderstood some of things which changed during the migration from v6 to v7, anyway I would appreciate your support and thank you in advance.


### Additional context

_No response_