Next.jsでmdx-js/reactを使ってMDXを読み込もうとするとTypeErrorが発生するのですがどなたかご教示お願いできますでしょうか。

前提・実現したいこと

Next.jsでmdx-js/reactを使ってmdxファイルを読み込みたいです。

環境

OS : macOS Bigsur
node : 16.3
React : 17.0.2
Next : 12.0.7
パッケージにはnpmを使用しています。
また、Dockerは使用しておりません。

設定

package.json

package.json
1{
2  "private": true,
3  "scripts": {
4    ~
5  },
6  "dependencies": {
7    "@chakra-ui/react": "^1.7.3",
8    "@emotion/react": "^11.7.1",
9    "@emotion/styled": "^11.6.0",
10    "@fortawesome/fontawesome-svg-core": "^1.2.36",
11    "@fortawesome/free-brands-svg-icons": "^5.15.4",
12    "@fortawesome/free-regular-svg-icons": "^5.15.4",
13    "@fortawesome/free-solid-svg-icons": "^5.15.4",
14    "@fortawesome/react-fontawesome": "^0.1.16",
15    "@mapbox/rehype-prism": "^0.8.0",
16    "@mdx-js/loader": "^1.6.22",
17    "@mdx-js/react": "^2.0.0-rc.2",
18    "@next/mdx": "^12.0.7",
19    "@types/prismjs": "^1.16.6",
20    "babel-plugin-prismjs": "^2.1.0",
21    "date-utils": "^1.2.21",
22    "framer-motion": "^5.5.5",
23    "fs": "^0.0.1-security",
24    "glob": "^7.1.7",
25    "gray-matter": "^4.0.3",
26    "install": "^0.13.0",
27    "moment": "^2.29.1",
28    "next": "12.0.7",
29    "next-compose-plugins": "^2.2.1",
30    "npm": "^8.3.0",
31    "postcss": "^8.2.15",
32    "prismjs": "^1.25.0",
33    "raw-loader": "^4.0.2",
34    "react": "17.0.2",
35    "react-burger-menu": "^3.0.6",
36    "react-dom": "^17.0.2",
37    "react-iframe": "^1.8.0",
38    "react-markdown": "^7.1.1",
39    "react-modern-drawer": "^1.0.1",
40    "react-router-dom": "^6.2.1",
41    "react-syntax-highlighter": "^15.4.5",
42    "react-twitter-widgets": "^1.10.0",
43    "rehype-katex": "^6.0.2",
44    "remark-gfm": "^3.0.1",
45    "remark-math": "^5.1.1",
46    "remove-markdown": "^0.3.0",
47    "sass": "^1.45.1",
48    "sharp": "^0.29.3",
49    "typescript": "^4.5.4",
50    "webpack": "^5.65.0"
51  },
52  "devDependencies": {
53    "@stylelint/postcss-css-in-js": "^0.37.2",
54    "@types/node": "16.11.11",
55    "@types/react": "17.0.37",
56    "eslint": "8.4.0",
57    "eslint-config-next": "12.0.7",
58    "webpack-bundle-analyzer": "^4.5.0",
59    "webpack-cli": "^4.9.1"
60  },
61}
62

next.config.js

next.config.js
1/** @type {import('next').NextConfig} */
2
3module.exports = {
4  reactStrictMode: true,
5  overrides: [
6    {
7      files: ["**/*.{jsx,tsx}"],
8      customSyntax: "@stylelint/postcss-css-in-js",
9    },
10  ],
11};
12const withMDX = require("@next/mdx")({
13extension: /.mdx?$/
14});
15module.exports = withMDX({
16  pageExtensions: ["js", "jsx", "ts", "tsx", "md", "mdx"],
17})

コード

_app.tsx

_app.tsx
1import { AppProps } from 'next/app'
2import Head from 'next/head'
3import 'styles/globals.scss'
4import { MDXProvider} from '@mdx-js/react'
5
6
7const App = ({ Component, pageProps }: AppProps) => (
8  <>
9    <Head>
10      <meta
11        name="viewport"
12        content="width=device-width, initial-scale=1, shrink-to-fit=no"
13      />
14      {/* <link rel="shortcut icon" href="/favicon.png" key="shortcutIcon" /> */}
15      {/* <link rel="manifest" href="/manifest.json" /> */}
16    </Head>
17    <MDXProvider>
18      <Component {...pageProps} />
19    </MDXProvider>
20  </>
21)
22
23export default App

sample.tsx

sample.tsx
1import Head from 'next/head';
2import React from "react";
3import Layout from 'components/Layout';
4import MD from '~/test1_md.mdx';
5import { Article, Button } from 'components/Layout_parts';
6import Article_styles from '~/style.module.scss';
7
8export default function Test1() {
9  return(
10    <>
11      <Head>
12        <title>SAMPLE</title>
13      </Head>
14      <Layout title={"ホーム"}>
15        <Article>
16            <MD/>
17        </Article>
18      </Layout>
19    </>
20  )
21}

エラー内容

TypeError: (0 , _mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx) is not a function
  18 |   return <MDXLayout {...layoutProps} {...props} components={components} mdxType="MDXLayout">
  19 | 
> 20 |     <h1>{`見出し1`}</h1>
     |     ^
  21 |     <h2>{`見出し2`}</h2>
  22 |     <h3>{`見出し3`}</h3>
  23 |     <p>{`段落`}</p>