refactor(mui): install new mui packages

app/imports/ui/layouts/App.jsx

@@ -2,7 +2,7 @@ import React, { useEffect, Suspense, lazy } from 'react';
 import { BrowserRouter, Switch, Route } from 'react-router-dom';
 import { Meteor } from 'meteor/meteor';
 import { Helmet } from 'react-helmet';
-import { MuiThemeProvider, useTheme } from '@material-ui/core/styles';
+import { ThemeProvider, useTheme } from '@material-ui/core/styles';
 import CssBaseline from '@material-ui/core/CssBaseline';
 import { MatomoProvider, useMatomo } from '@datapunt/matomo-tracker-react';
 import ProtectedRoute from '../components/system/ProtectedRoute';
@@ -83,12 +83,12 @@ function App() {
 
 export default () => (
   <MatomoProvider value={instance}>
-    <MuiThemeProvider theme={lightTheme}>
+    <ThemeProvider theme={lightTheme}>
       <BrowserRouter>
         <DynamicStore>
           <App />
         </DynamicStore>
       </BrowserRouter>
-    </MuiThemeProvider>
+    </ThemeProvider>
   </MatomoProvider>
 );

app/package.json

@@ -17,10 +17,16 @@
   "dependencies": {
     "@babel/runtime": "^7.17.8",
     "@datapunt/matomo-tracker-react": "^0.5.1",
+    "@emotion/react": "^11.9.3",
+    "@emotion/styled": "^11.9.3",
     "@material-table/core": "^4.3.38",
     "@material-ui/core": "^4.12.3",
     "@material-ui/icons": "^4.11.2",
     "@material-ui/lab": "^4.0.0-alpha.60",
+    "@mui/icons-material": "^5.8.4",
+    "@mui/lab": "^5.0.0-alpha.90",
+    "@mui/material": "^5.9.0",
+    "@mui/styles": "^5.9.0",
     "@toast-ui/editor": "^3.1.3",
     "@toast-ui/editor-plugin-chart": "^3.0.1",
     "@toast-ui/editor-plugin-code-syntax-highlight": "^3.0.0",