storybook: Module not found: Error: Can't resolve mdx file

I got this error

ERROR in ./stories/components/atomic/Button.stories.tsx
Module not found: Error: Can't resolve './Button.stories.mdx' in '/Users/user/Desktop/plasma/order-seller-fe-npay/packages/common/components/stories/components/atomic'
 @ ./stories/components/atomic/Button.stories.tsx 110:43-74
 @ ./stories sync ^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^\/]*?\.stories\.(tsx|mdx))$
 @ ./.storybook/generated-stories-entry.js
 @ multi /Users/user/Desktop/plasma/order-seller-fe-npay/node_modules/@storybook/core/dist/server/common/polyfills.js /Users/user/Desktop/plasma/order-seller-fe-npay/node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/storybook-init-framework-entry.js /Users/user/Desktop/plasma/order-seller-fe-npay/node_modules/@storybook/addon-docs/dist/frameworks/common/config.js-generated-other-entry.js /Users/user/Desktop/plasma/order-seller-fe-npay/node_modules/@storybook/addon-docs/dist/frameworks/react/config.js-generated-other-entry.js /Users/user/Desktop/plasma/order-seller-fe-npay/node_modules/@storybook/addon-actions/dist/preset/addDecorator.js-generated-other-entry.js /Users/user/Desktop/plasma/order-seller-fe-npay/node_modules/@storybook/addon-actions/dist/preset/addArgs.js-generated-other-entry.js /Users/user/Desktop/plasma/order-seller-fe-npay/node_modules/@storybook/addon-links/dist/preset/addDecorator.js-generated-other-entry.js /Users/user/Desktop/plasma/order-seller-fe-npay/node_modules/@storybook/addon-knobs/dist/preset/addDecorator.js-generated-other-entry.js ./.storybook/preview.js-generated-config-entry.js ./.storybook/generated-stories-entry.js /Users/user/Desktop/plasma/order-seller-fe-npay/node_modules/webpack-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined

With

Button.stories.tsx

import Button from '../../../atomic/Button';;
import mdx from './Button.stories.mdx';
import React from 'react';

export default {
  title: 'components/atomic/Button',
  component: Button,
  parameters: {
    docs: {
      page: mdx
    } 
  }
};

export const basic = (props) => {
  return <Button {...props}>TEST</Button>;
};
basic.story = { 
  name: 'Basic'
};

Button.stories.mdx

import { Meta, Story } from '@storybook/addon-docs/blocks';
import * as stories from './Button.stories.tsx';

<Meta title="components/atomic/Button" />

# Button

I can define a story with the function imported from CSF:
testetsetsektjksledjflksjkl

<Story story={stories.basic} />

And I can also embed arbitrary markdown & JSX in this file.

How can I add Button.stories.mdx file as docs.

I declared mdx at global.d.ts

declare module '*.mdx' {
  const content: string;
  export default content;
}