migration v3.0 and mui v5.0.3

.eslintrc

@@ -4,7 +4,7 @@
         "browser": true,
         "es2021": true
     },
-    "extends": ["airbnb", "prettier", "plugin:jsx-a11y/recommended", "plugin:react-hooks/recommended"],
+    "extends": ["airbnb", "prettier", "plugin:react/jsx-runtime", "plugin:jsx-a11y/recommended", "plugin:react-hooks/recommended"],
     "settings": {
         "import/resolver": {
             "node": {
@@ -32,6 +32,7 @@
         "import/order": 0,
         "no-console": 0,
         "jsx-a11y/anchor-is-valid": 0,
+        "prefer-destructuring": 0,
         "no-shadow": 0,
         "no-unused-vars": [
             1,
@@ -47,7 +48,8 @@
                 "singleQuote": true,
                 "trailingComma": "none",
                 "tabWidth": 4,
-                "useTabs": false
+                "useTabs": false,
+                "endOfLine": "auto"
             }
         ]
     }

package.json

@@ -6,12 +6,13 @@
         "@emotion/cache": "^11.4.0",
         "@emotion/react": "^11.4.0",
         "@emotion/styled": "^11.3.0",
-        "@material-ui/core": "^5.0.0-beta.0",
-        "@material-ui/data-grid": "^4.0.0-alpha.33",
-        "@material-ui/icons": "^5.0.0-beta.0",
-        "@material-ui/lab": "^5.0.0-alpha.39",
-        "@material-ui/styles": "^5.0.0-beta.0",
-        "@material-ui/utils": "^5.0.0-beta.0",
+        "@mui/icons-material": "^5.0.3",
+        "@mui/lab": "^5.0.0-alpha.50",
+        "@mui/material": "^5.0.3",
+        "@mui/styles": "^5.0.1",
+        "@mui/system": "^5.0.3",
+        "@mui/utils": "^5.0.1",
+        "@mui/x-data-grid": "^5.0.0-beta.3",
         "@tabler/icons": "^1.39.1",
         "@testing-library/jest-dom": "^5.11.10",
         "@testing-library/react": "^11.2.6",
@@ -65,16 +66,19 @@
     },
     "devDependencies": {
         "@babel/core": "^7.14.8",
-        "@babel/eslint-parser": "^7.14.7",
-        "eslint": "^7.31.0",
-        "eslint-config-airbnb": "18.2.1",
+        "@babel/eslint-parser": "^7.15.8",
+        "eslint": "^7.27.0",
+        "eslint-config-airbnb-typescript": "^12.3.1",
         "eslint-config-prettier": "^8.3.0",
-        "eslint-plugin-import": "2.22.1",
-        "eslint-plugin-jsx-a11y": "6.4.1",
+        "eslint-config-react-app": "6.0.0",
+        "eslint-import-resolver-typescript": "2.4.0",
+        "eslint-plugin-flowtype": "^5.7.2",
+        "eslint-plugin-import": "^2.23.3",
+        "eslint-plugin-jsx-a11y": "6.3.1",
         "eslint-plugin-prettier": "^3.4.0",
-        "eslint-plugin-react": "7.21.5",
-        "eslint-plugin-react-hooks": "^4.2.0",
+        "eslint-plugin-react": "^7.26.1",
+        "eslint-plugin-react-hooks": "4.0.8",
         "prettier": "^2.2.1",
-        "sass": "^1.32.11"
+        "sass": "^1.42.1"
     }
 }

src/App.js

@@ -1,19 +1,18 @@
-import React from 'react';
 import { useSelector } from 'react-redux';
 
-import { ThemeProvider } from '@material-ui/core/styles';
-import { CssBaseline, StyledEngineProvider } from '@material-ui/core';
+import { ThemeProvider } from '@mui/material/styles';
+import { CssBaseline, StyledEngineProvider } from '@mui/material';
 
 // routing
-import Routes from './routes';
+import Routes from 'routes';
 
 // defaultTheme
-import themes from './themes';
+import themes from 'themes';
 
 // project imports
-import NavigationScroll from './layout/NavigationScroll';
+import NavigationScroll from 'layout/NavigationScroll';
 
-// ===========================|| APP ||=========================== //
+// ==============================|| APP ||============================== //
 
 const App = () => {
     const customization = useSelector((state) => state.customization);