Materail UI v5 TextField component caues Jest test to fail - jestjs

Question

I recently upgraded from Material UI v4 to v5. It seems there is some kind of incompatibility with my Jest tests since now I get the following error when attempting to render a TextField. The test runs fine if I use the component from MUI v4. The component renders fine when viewing the page in the browser.
Error: Uncaught [TypeError: Cannot read properties of undefined (reading ‘setAttribute’)]
at reportException (/home/node_modules/jest-config/node_modules/jsdom/lib/jsdom/living/helpers/runtime-script-errors.js:66:24)
at innerInvokeEventListeners (/home/node_modules/jest-config/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:341:9)
at invokeEventListeners (/home/node_modules/jest-config/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:274:3)
at HTMLUnknownElementImpl._dispatch (/home/node_modules/jest-config/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:221:9)
at HTMLUnknownElementImpl.dispatchEvent (/home/node_modules/jest-config/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:94:17)
at HTMLUnknownElement.dispatchEvent (/home/node_modules/jest-config/node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:231:34)
at Object.invokeGuardedCallbackDev (/home/node_modules/react-dom/cjs/react-dom.development.js:4210:16)
at invokeGuardedCallback (/home/node_modules/react-dom/cjs/react-dom.development.js:4274:31)
at reportUncaughtErrorInDEV (/home/node_modules/react-dom/cjs/react-dom.development.js:22737:5)
at captureCommitPhaseError (/home/node_modules/react-dom/cjs/react-dom.development.js:27078:5) TypeError: Cannot read properties of undefined (reading ‘setAttribute’)
at /home/node_modules/#emotion/react/dist/emotion-react.cjs.dev.js:206:12
console.error
The above error occurred in the <EmotionGlobal> component:
at /home/node_modules/#emotion/react/dist/emotion-element-e89f38a3.cjs.dev.js:64:23
at GlobalStyles (/home/node_modules/#mui/styled-engine/node/GlobalStyles/GlobalStyles.js:28:5)
at GlobalStyles
at InputBase (/home/node_modules/#mui/material/node/InputBase/InputBase.js:251:44)
at OutlinedInput (/home/node_modules/#mui/material/node/OutlinedInput/OutlinedInput.js:135:44)
at div
at /home/node_modules/#emotion/react/dist/emotion-element-e89f38a3.cjs.dev.js:64:23
at FormControl (/home/node_modules/#mui/material/node/FormControl/FormControl.js:111:44)
at /home/node_modules/#emotion/react/dist/emotion-element-e89f38a3.cjs.dev.js:64:23
at TextField (/home/node_modules/#mui/material/node/TextField/TextField.js:107:44)
at div
at /home/node_modules/#emotion/react/dist/emotion-element-e89f38a3.cjs.dev.js:64:23
at Box (/home/node_modules/#mui/system/createBox.js:41:41)
at div
at /home/node_modules/#emotion/react/dist/emotion-element-e89f38a3.cjs.dev.js:64:23
at Box (/home/node_modules/#mui/system/createBox.js:41:41)
at form
at CreateNewCVForm (/home/src/project/sciencv/static/sciencv/js/index/CreateNewCVForm.js:16:41)
at div
at /home/node_modules/#emotion/react/dist/emotion-element-e89f38a3.cjs.dev.js:64:23
at Box (/home/node_modules/#mui/system/createBox.js:41:41)
at div
at /home/node_modules/#emotion/react/dist/emotion-element-e89f38a3.cjs.dev.js:64:23
at CVListPage (/home/src/project/sciencv/static/sciencv/js/CVListPage.js:77:
Here is my package.json. I believe I upgraded to latest version of the various libraries that are being used to run the tests. I tried passing in the required / non-required attributes that are used by the component.
"devDependencies": {
"#babel/core": "^7.16.0",
"#babel/plugin-proposal-class-properties": "^7.16.0",
"#babel/plugin-proposal-optional-chaining": "^7.16.0",
"#babel/plugin-proposal-private-methods": "^7.16.0",
"#babel/plugin-transform-react-jsx": "^7.16.0",
"#babel/plugin-transform-react-jsx-self": "^7.16.0",
"#babel/preset-env": "^7.16.4",
"#babel/preset-react": "^7.16.0",
"#emotion/react": "^11.9.0",
"#emotion/styled": "^11.8.1",
"#material-ui/core": "^4.12.4",
"#mui/icons-material": "^5.8.3",
"#mui/lab": "^5.0.0-alpha.83",
"#mui/material": "^5.8.1",
"#mui/styles": "^5.8.0",
"#testing-library/jest-dom": "^5.16.4",
"#testing-library/react": "^13.3.0",
"axios": "^0.21.4",
"babel-eslint": "^10.1.0",
"babel-loader": "^8.2.3",
"clean-webpack-plugin": "^2.0.1",
"clone": "^2.1",
"css-loader": "^2.1.1",
"cssnano": "^4.1.10",
"date-fns": "^2.28.0",
"eslint": "^6.8.0",
"eslint-config-prettier": "^6.15.0",
"eslint-config-standard": "^14.1.1",
"eslint-loader": "^3.0.4",
"eslint-plugin-import": "^2.25.3",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-promise": "^4.3.1",
"eslint-plugin-standard": "^4.1.0",
"file-loader": "^4.2.0",
"jest": "^27.3.1",
"jest-teamcity-reporter": "^0.9.0",
"loglevel": "^1.7.1",
"marked": "^1.2.9",
"mini-css-extract-plugin": "^0.5.0",
"optimize-css-assets-webpack-plugin": "^5.0.1",
"prettier": "^2.4.1",
"react": "^18.1.0",
"react-dom": "^18.1.0",
"react-test-renderer": "^18.1.0",
"reactstrap": "^8.10.1",
"regenerator-runtime": "^0.13.9",
"resolve-url-loader": "^3.1.2",
"sass": "^1.43.4",
"terser-webpack-plugin": "^1.4.3",
"url-loader": "^3.0.0",
"webpack": "^4.46.0",
"webpack-bundle-tracker": "^0.4.3",
"webpack-cli": "^3.3.11",
"webpack-merge": "^4.2.1"
}