[Bug] Rendered twice on the React 18 with StrictMode

[devappmin]

Describe the bug
It was rendered twice on the React 18 with StrictMode.

To Reproduce
Steps to reproduce the behavior:

I've created the milkdown component with the below codes.

// components/milkdown/milkdown-editor.tsx
import React from "react";
import { Editor, rootCtx } from "@milkdown/core";
import { nord } from "@milkdown/theme-nord";
import { ReactEditor, useEditor } from "@milkdown/react";
import { commonmark } from "@milkdown/preset-commonmark";
import { menu } from "@milkdown/plugin-menu";

const MilkdownEditor: React.FC = () => {
  const editor = useEditor((root) => {
    return Editor.make()
      .config((ctx) => {
        ctx.set(rootCtx, root);
      })
      .use(nord)
      .use(menu)
      .use(commonmark);
  }, []);

  return <ReactEditor editor={editor} />;
};

export default MilkdownEditor;

After that, I simply added the milkdown component at the App.tsx.

// App.tsx
import React from "react";
import MilkdownEditor from "../components/milkdown/milkdown-editor";

const App = () => {
  return <MilkdownEditor />;
};

export default App;

Finally, the react renders the editor twice.

Expected behavior
The editor should be rendered once.

Screenshots

Desktop (please complete the following information):

• OS: macOS 12.4
• Browser: Microsoft Edge, Min
• Version: 102.0.1245.33

My package.json

{
  "name": "jamong-frontend",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@emotion/react": "^11.9.0",
    "@emotion/styled": "^11.8.1",
    "@milkdown/core": "^6.1.4",
    "@milkdown/plugin-menu": "^6.1.4",
    "@milkdown/preset-commonmark": "^6.1.4",
    "@milkdown/prose": "^6.1.4",
    "@milkdown/react": "^6.1.4",
    "@milkdown/theme-nord": "^6.1.4",
    "@mui/icons-material": "^5.8.2",
    "@mui/material": "^5.7.0",
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.2.0",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^27.5.1",
    "@types/node": "^16.11.35",
    "@types/react": "^18.0.9",
    "@types/react-dom": "^18.0.4",
    "aos": "^2.3.4",
    "react": "^18.1.0",
    "react-dom": "^18.1.0",
    "react-router": "^6.3.0",
    "react-router-dom": "^6.3.0",
    "react-scripts": "5.0.1",
    "typescript": "^4.6.4",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "lint": "eslint .",
    "lint:fix": "eslint --fix .",
    "prepare": "husky install"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@types/aos": "^3.0.4",
    "@typescript-eslint/eslint-plugin": "^5.23.0",
    "@typescript-eslint/parser": "^5.23.0",
    "eslint": "^8.15.0",
    "eslint-config-airbnb": "^19.0.4",
    "eslint-config-airbnb-typescript": "^17.0.0",
    "eslint-config-prettier": "^8.5.0",
    "eslint-plugin-import": "^2.26.0",
    "eslint-plugin-jsx-a11y": "^6.5.1",
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-react": "^7.29.4",
    "eslint-plugin-react-hooks": "^4.5.0",
    "husky": "^8.0.0",
    "prettier": "^2.6.2"
  }
}

Additional context

I've also tried online demo code with the StrictMode on, and I figured out that the online code will produce the error with this situation.

I think it is due to effects fired twice in the React 18. Link

[Saul-Mirone]

Will be fixed by #533

[shlroland]

Will be fixed by #533

it still render twice in react 18.2 with StrictMode

this is code
archives.zip