fix(ui): frontend dependency issues

[WeryZebra-Yue]

Description of what the bug is.

1. Need to force install
2. Receiving a lot of errors while installing npm install

Steps to reproduce the behavior:

cd ui
npm install -f

Logs and additional context

....


ERROR in ../../../node_modules/@mui/material/internal/svg-icons/CheckBoxOutlineBlank.js 3:0-31
Module not found: Error: Can't resolve 'react' in '/Users/ayushmaster/node_modules/@mui/material/internal/svg-icons'
@ ../../../node_modules/@mui/material/Checkbox/Checkbox.js 13:0-82 66:38-62
@ ../../../node_modules/@mui/material/Checkbox/index.js 3:0-37 3:0-37
@ ../../../node_modules/material-react-table/dist/esm/material-react-table.esm.js 43:0-46 1011:143-151 1696:84-92 1724:269-277
@ ./src/pages/Metrics/Metrics.tsx 14:0-58 17:32-50
@ ./src/App.tsx 5:0-46 12:41-48
@ ./src/index.tsx 2:0-24 8:28-31

ERROR in ../../../node_modules/@mui/material/internal/svg-icons/CheckBoxOutlineBlank.js 9:0-48
Module not found: Error: Can't resolve 'react/jsx-runtime' in '/Users/ayushmaster/node_modules/@mui/material/internal/svg-icons'
@ ../../../node_modules/@mui/material/Checkbox/Checkbox.js 13:0-82 66:38-62
@ ../../../node_modules/@mui/material/Checkbox/index.js 3:0-37 3:0-37
@ ../../../node_modules/material-react-table/dist/esm/material-react-table.esm.js 43:0-46 1011:143-151 1696:84-92 1724:269-277
@ ./src/pages/Metrics/Metrics.tsx 14:0-58 17:32-50
@ ./src/App.tsx 5:0-46 12:41-48
@ ./src/index.tsx 2:0-24 8:28-31

ERROR in ../../../node_modules/@mui/material/internal/svg-icons/Close.js 3:0-31
Module not found: Error: Can't resolve 'react' in '/Users/ayushmaster/node_modules/@mui/material/internal/svg-icons'
@ ../../../node_modules/@mui/material/Alert/Alert.js 21:0-52 161:140-149
@ ../../../node_modules/@mui/material/Alert/index.js 3:0-34 3:0-34
@ ../../../node_modules/material-react-table/dist/esm/material-react-table.esm.js 54:0-40 1130:142-147
@ ./src/pages/Metrics/Metrics.tsx 14:0-58 17:32-50
@ ./src/App.tsx 5:0-46 12:41-48
@ ./src/index.tsx 2:0-24 8:28-31

ERROR in ../../../node_modules/@mui/material/internal/svg-icons/Close.js 11:0-48
Module not found: Error: Can't resolve 'react/jsx-runtime' in '/Users/ayushmaster/node_modules/@mui/material/internal/svg-icons'
@ ../../../node_modules/@mui/material/Alert/Alert.js 21:0-52 161:140-149
@ ../../../node_modules/@mui/material/Alert/index.js 3:0-34 3:0-34
@ ../../../node_modules/material-react-table/dist/esm/material-react-table.esm.js 54:0-40 1130:142-147
@ ./src/pages/Metrics/Metrics.tsx 14:0-58 17:32-50
@ ./src/App.tsx 5:0-46 12:41-48
@ ./src/index.tsx 2:0-24 8:28-31

ERROR in ../../../node_modules/@mui/material/internal/svg-icons/ErrorOutline.js 3:0-31
Module not found: Error: Can't resolve 'react' in '/Users/ayushmaster/node_modules/@mui/material/internal/svg-icons'
@ ../../../node_modules/@mui/material/Alert/Alert.js 19:0-66 123:27-43
@ ../../../node_modules/@mui/material/Alert/index.js 3:0-34 3:0-34
@ ../../../node_modules/material-react-table/dist/esm/material-react-table.esm.js 54:0-40 1130:142-147
@ ./src/pages/Metrics/Metrics.tsx 14:0-58 17:32-50
@ ./src/App.tsx 5:0-46 12:41-48
@ ./src/index.tsx 2:0-24 8:28-31

... 
continues