Talking_character: TS2590: Expression produces a union type that is too complex to represent.

[Tipingouin17]

ERROR in src/pages/character.tsx:
ERROR in src/pages/character.tsx:76:9
TS2590: Expression produces a union type that is too complex to represent.
    74 |     [CharacterState.Idle]: (
    75 |       <IconButton
  > 76 |         className="shadow-box"
       |         ^^^^^^^^^^^^^^^^^^^^^^
  > 77 |         onClick={onMicButtonPressed}
       | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  > 78 |         aria-label="Start Recording"
       | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  > 79 |         sx={{
       | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  > 80 |           width: '10vh',
       | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  > 81 |           height: '10vh',
       | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  > 82 |           marginTop: '30px',
       | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  > 83 |           padding: '16px',
       | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  > 84 |           borderRadius: '50%',
       | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  > 85 |           color: COLORS.primary,
       | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  > 86 |           backgroundColor: COLORS.bgcolor,
       | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  > 87 |           '&:hover': {
       | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  > 88 |             backgroundColor: COLORS.bgcolor,
       | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  > 89 |             '@media (hover: none)': {
       | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  > 90 |               backgroundColor: COLORS.bgcolor,
       | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  > 91 |             },
       | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  > 92 |           },
       | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  > 93 |         }}>
       | ^^^^^^^^^^^
    94 |         <KeyboardVoiceOutlined sx={{fontSize: '40px'}} />
    95 |       </IconButton>
    96 |     ),
ERROR in src/pages/character.tsx:94:32
TS2590: Expression produces a union type that is too complex to represent.
    92 |           },
    93 |         }}>
  > 94 |         <KeyboardVoiceOutlined sx={{fontSize: '40px'}} />
       |                                ^^^^^^^^^^^^^^^^^^^^^^^
    95 |       </IconButton>
    96 |     ),
    97 |     [CharacterState.Listening]: (
ERROR in src/pages/character.tsx:94:36
TS2590: Expression produces a union type that is too complex to represent.
    92 |           },
    93 |         }}>
  > 94 |         <KeyboardVoiceOutlined sx={{fontSize: '40px'}} />
       |                                    ^^^^^^^^^^^^^^^^^^
    95 |       </IconButton>
    96 |     ),
    97 |     [CharacterState.Listening]: (
ERROR in src/pages/character.tsx:157:9
TS2590: Expression produces a union type that is too complex to represent.
    155 |       }}>
    156 |       <AppBar
  > 157 |         position="static"
        |         ^^^^^^^^^^^^^^^^^
  > 158 |         color="transparent"
        | ^^^^^^^^^^^^^^^^^^^^^^^^^^^
  > 159 |         elevation={0}
        | ^^^^^^^^^^^^^^^^^^^^^^^^^^^
  > 160 |         sx={{width: boxWidth, alignSelf: 'center'}}>
        | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    161 |         <Toolbar className="tool-bar">
    162 |           <Box
    163 |             component="div"
ERROR in src/pages/character.tsx:161:18
TS2590: Expression produces a union type that is too complex to represent.
    159 |         elevation={0}
    160 |         sx={{width: boxWidth, alignSelf: 'center'}}>
  > 161 |         <Toolbar className="tool-bar">
        |                  ^^^^^^^^^^^^^^^^^^^^
    162 |           <Box
    163 |             component="div"
    164 |             className="shadow-back-button"
ERROR in src/pages/character.tsx:233:11
TS2590: Expression produces a union type that is too complex to represent.
    231 |             overflow: 'hidden',
    232 |           }}>
  > 233 |           <Typography>{transcript[0]}</Typography>
        |           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    234 |         </Box>
    235 |
    236 |         <Box
ERROR in src/pages/personality.tsx:328:13
TS2590: Expression produces a union type that is too complex to represent.
    326 |           }}>
    327 |           <Button
  > 328 |             className = "shadow-update-button"
        |             ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  > 329 |             sx={{
        | ^^^^^^^^^^^^^^^^^
  > 330 |               color: COLORS.grey,
        | ^^^^^^^^^^^^^^^^^
  > 331 |             }}
        | ^^^^^^^^^^^^^^^^^
  > 332 |             onClick={handleCancelUploadImage}>
        | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    333 |             Cancel
    334 |           </Button>
    335 |           <Button