Webpack error related to mui on typescript project

[wondie]

I got the following error when installing 3.0.1 and using it on react 18.2.0 and typescript 4.7.4.

ERROR in ./node_modules/@mui/styled-engine/GlobalStyles/GlobalStyles.js 3:0-40  
Module not found: Error: Can't resolve '@emotion/react' in 'node_modules\@mui\styled-engine\GlobalStyles'    

ERROR in ./node_modules/@mui/styled-engine/StyledEngineProvider/StyledEngineProvider.js 3:0-47
Module not found: Error: Can't resolve '@emotion/react' in 'node_modules\@mui\styled-engine\StyledEngineProvider'

ERROR in ./node_modules/@mui/styled-engine/index.js 6:0-39
Module not found: Error: Can't resolve '@emotion/styled' in 'node_modules\@mui\styled-engine'

ERROR in ./node_modules/@mui/styled-engine/index.js 30:0-62
Module not found: Error: Can't resolve '@emotion/react' in 'node_modules\@mui\styled-engine'

ERROR in ./node_modules/@mui/system/esm/ThemeProvider/ThemeProvider.js 11:27-60 
export 'ThemeContext' (imported as 'StyledEngineThemeContext') was not found in 
'@mui/styled-engine' (possible exports: GlobalStyles, StyledEngineProvider, default)

ERROR in ./node_modules/@mui/system/esm/index.js 1:0-88
export 'css' (reexported as 'css') was not found in '@mui/styled-engine' (possible exports: GlobalStyles, StyledEngineProvider, default)

ERROR in ./node_modules/@mui/system/esm/index.js 1:0-88
export 'keyframes' (reexported as 'keyframes') was not found in '@mui/styled-engine' (possible exports: GlobalStyles, StyledEngineProvider, default)

ERROR in ./node_modules/react-collapse-pane/dist/react-collapse-pane.esm.js 2:0-48
Module not found: Error: Can't resolve 'styled-components' in 'node_modules\react-collapse-pane\dist'        

webpack compiled with 8 errors and 1 warning

[wondie]

Installing the following fixed the errors:

npm i @emotion/react
npm i @emotion/styled    
npm i styled-components