How can I use MDX in a bun create react project?

[chebread]

I used the bun plugin in the official documentation because it seems that MDX can be used in a React project. But nothing has changed.
I have that bug and I'm configuring it using these mdx packages.

Bugs

Failed to execute 'createElement' on 'Document': The tag name provided ('http://localhost:3000/hash:blablabla') is not a valid name.

Package.json (mdx packages)

{
  "name": "blablabla",
  "version": "0.1.69",
  "dependencies": {
    "@mdx-js/esbuild": "^2.3.0",
    "@mdx-js/react": "^2.3.0",
    "@types/mdx": "^2.0.3",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-helmet-async": "^1.3.0",
    "react-router-dom": "^6.8.1",
    "web-vitals": "^3.0.3"
  },
  "eslintConfig": {
    "extends": [
      "react-app"
    ]
  },
  "devDependencies": {
    "@types/react": "latest",
    "@types/react-dom": "latest",
    "@types/react-router-dom": "^5.3.3",
    "bun-types": "^0.5.6",
    "react-refresh": "0.10.0",
    "typescript": "latest"
  }
}

react-app-env.d.ts

declare module "*.mdx" {
  let MDXComponent: (props: any) => JSX.Element;
  export default MDXComponent;
}

tsconfig.json

{
  "compilerOptions": {
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "allowSyntheticDefaultImports": true,
    "lib": ["DOM", "DOM.Iterable", "ESNext"],
    "module": "ESNext",
    "target": "ESNext",
    "moduleResolution": "node",
    "baseUrl": "src",
    "jsx": "react-jsxdev",
    "types": ["bun-types"]
  },
  "include": ["src"]
}

index.tsx

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";

const targetElement = document.getElementById("root");
const root = ReactDOM.createRoot(targetElement!);
root.render(
  <React.StrictMode>
      <App />
  </React.StrictMode>
);

App.tsx

import { MDXProvider } from "@mdx-js/react";
import { useState } from "react";
import MDX from "./intro.mdx";

const App = () => {
  const [count, setCount] = useState(1);

  return (
    <div>
      <MDXProvider>
        <MDX /> // How can I use MDX in bun create react project
      </MDXProvider>
    </div>
  );
};

export default App;