React17+TS4环境下rc-dock的DockLayout无法作为JSX组件使用

我使用React 17、MUI v5、TypeScript 4开发项目，尝试引入rc-dock库实现布局功能，将官方示例代码直接复制到项目的SceneComponent.tsx文件中，但VSCode持续高亮DockLayout元素，抛出两个错误：

JSX element class does not support attributes because it does not have a 'props' property.ts(2607)
'DockLayout' cannot be used as a JSX component. Its instance type 'DockLayout' is not a valid JSX element. Type 'DockLayout' is missing the following properties from type 'ElementClass': context, setState, forceUpdate, props, and 2 more.ts(2786)

DockLayout是rc-dock库自带的组件，并非自定义组件，我无法理解错误产生的原因。

项目配置文件 #

package.json #

{
  "name": "APP",
  "version": "1.0",
  "description": "App",
  "main": "src/index.tsx",
  "scripts": {
    "release": "webpack --config webpack.prod.config.js",
    "debug": "webpack --config webpack.dev.config.js",
    "test": "jest --verbose --coverage --runInBand",
    "testinspect": "node --inspect-brk ./node_modules/jest/bin/jest.js --runInBand --verbose",
    "start": "webpack-dev-server --open --hot --https --config webpack.dev.config.js  --port 3002",
    "pro": "webpack-dev-server --open --hot --config webpack.dev.config.js  --port 3002",
    "prorelease": "webpack-dev-server --open --hot --config webpack.prod.config.js --port 3002",
    "jonsportal": "webpack-dev-server --open --hot --config webpack.dev.config.js --content-base ./",
    "andersportal": "webpack-dev-server --open --hot --config webpack.dev.config.js --content-base c:/src/seismicportal",
    "analyze": "webpack --config webpack.analyze.config.js",
    "lint": "eslint"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@emotion/react": "^11.9.3",
    "@emotion/styled": "^11.9.3",
    "@mui/icons-material": "^5.6.2",
    "@mui/lab": "*",
    "@mui/material": "^5.6.2",
    "@mui/styles": "^5.9.0",
    "@reactivex/rxjs": "github:reactivex/rxjs",
    "@types/arcgis-js-api": "^4.20.1",
    "@types/classnames": "^2.3.0",
    "@types/jest": "^27.4.0",
    "@types/lodash": "^4.14.173",
    "@types/material-ui": "^0.21.9",
    "@types/qs": "6.9.7",
    "@types/react": "^17.0.47",
    "@types/react-color": "^3.0.5",
    "@types/react-dom": "^17.0.16",
    "@types/uuid": "^8.3.1",
    "assert": "^2.0.0",
    "axios": "^0.21.4",
    "buffer": "^6.0.3",
    "classnames": "^2.3.1",
    "d3": "^4.13.0",
    "esri-loader": "^3.2.0",
    "fast-png": "^6.1.0",
    "fork-ts-checker-webpack-plugin": "6.3.3",
    "geotiff": "^0.4.1",
    "https-browserify": "^1.0.0",
    "isomorphic-fetch": "^3.0.0",
    "jest": "^27.4.7",
    "jest-cli": "^27.4.7",
    "jpeg-js": "^0.4.3",
    "lerc": "^3.0.0",
    "npm-check-updates": "^11.8.5",
    "process": "^0.11.10",
    "prop-types": "^15.7.2",
    "qs": "^6.10.1",
    "rc-dock": "^3.2.10",
    "react": "^17.0.2",
    "react-color": "^2.19.3",
    "react-dom": "^17.0.2",
    "react-rnd": "^10.3.5",
    "react-virtualized-auto-sizer": "^1.0.6",
    "react-virtuoso": "^2.13.1",
    "react-window": "^1.8.7",
    "rxjs": "^7.3.0",
    "stream": "^0.0.2",
    "stream-browserify": "^3.0.0",
    "stream-http": "^3.2.0",
    "terser-webpack-plugin": "^1.2.3",
    "tinycolor2": "^1.4.2",
    "ts-jest": "^27.1.4",
    "ts-loader": "^4.5.0",
    "ts-shader-loader": "^1.0.6",
    "tss-react": "^3.6.2",
    "util": "^0.12.4",
    "uuid": "^8.3.2",
    "webpack": "^4.41.6",
    "webpack-cli": "^3.1.1",
    "webpack-merge": "^4.1.4",
    "webpack-simple-progress-plugin": "^0.0.4"
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^5.27.1",
    "@typescript-eslint/parser": "^5.27.1",
    "copy-webpack-plugin": "^4.6.0",
    "eslint": "^8.17.0",
    "jest-extended": "^0.11.5",
    "source-map-loader": "^0.2.4",
    "ts-node": "^10.2.1",
    "typescript": "^4.7.3",
    "webpack-bundle-analyzer": "^4.4.2",
    "webpack-dev-server": "^3.11.0"
  },
  "jest": {
    "verbose": true,
    "modulePathIgnorePatterns": [
      ".*__mocks__.*"
    ],
    "testURL": "http://localhost/",
    "transform": {
      "^.+\\.tsx?$": "ts-jest"
    },
    "testRegex": "(/test/.*|(\\.|/)(test|spec))\\.(ts?|tsx?)$",
    "moduleFileExtensions": [
      "ts",
      "js",
      "tsx"
    ]
  },
  "_id": "APP"
}

tsconfig.json #

{
    "compilerOptions": {
        "outDir": "./dist/",
        "sourceMap": true,
        "noImplicitAny": false,
        "module": "commonjs",
        "target": "es5",
        "lib": ["es2016","dom", "es2017.object"],
        "allowJs": true,
        "declaration": false,
        
        "moduleResolution": "node",
        "jsx": "react",
        "types": ["jest"],
        "typeRoots": ["./types", "./node_modules/@types"]        
      
    },
    "include": [
        "./src/**/*" ,
        "**/*.test.ts"
        
    ],
    "exclude": [
        "node_modules",
        "js"
    ]    
}

内容的提问来源于stack exchange，提问作者sakul