TypeError: Cannot read property 'attach' of undefined

前提・実現したいこと

react-codemirrorを使ってエディタを表示したいと思っています。
しかし、記事を参考にしても以下のようなエラーが出てしまって困っています。
調べてみてもmaterial-uiの同じようなエラーしかしないため、どのようにして解消すればいいのかわかりません。
わかる方がいましたら、コメントお願いします。

https://mebee.info/2020/03/15/post-7428/

発生している問題・エラーメッセージ

TypeError: Cannot read property 'attach' of undefined

該当のソースコード

Javascript
1import React from 'react';
2import CodeMirror from '@uiw/react-codemirror';
3import 'codemirror/keymap/sublime';
4import 'codemirror/theme/monokai.css';
5 
6const code = 'import React from \'react\'';
7 
8export const Sample = () => {    
9    return (
10        <CodeMirror
11        value={code}
12        options={{
13            theme: 'monokai',
14            keyMap: 'sublime',
15            mode: 'jsx',
16        }}
17        />
18    )
19}
20  
21export default Sample

##質問の回答
package.json

{
  "name": "codemirror",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.6",
    "@testing-library/react": "^11.2.2",
    "@testing-library/user-event": "^12.6.0",
    "@uiw/react-codemirror": "^3.0.1",
    "codemirror": "^5.58.3",
    "react": "^17.0.1",
    "react-codemirror": "^1.0.0",
    "react-codemirror2": "^7.2.1",
    "react-dom": "^17.0.1",
    "react-scripts": "4.0.1",
    "web-vitals": "^0.2.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "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"
    ]
  }
}