TS2322 Error Type {} is not assignable to type 'undefined'. when using SX Prop Nested Component. MUI Drawer example not compiling

Question

I am trying to compile and run the MUI Drawer component (permanent fixed) version and typescript is not compiling. It is throwing a TS2322 error.

$ npm run build

> [email protected] build
> react-scripts build

Creating an optimized production build...
Failed to compile.

TS2322: Type '{ width: number; flexShrink: number; "& .MuiDrawer-paper": { width: number; boxSizing: string; }; }' is not assignable to type '{ [cssVariable: string]: ReactText; } | SystemCssProperties<Theme> | CSSPseudoSelectorProps<Theme> | CSSSelectorObject<Theme> | ((theme: Theme) => SystemStyleObject<Theme>) | (boolean | ... 5 more ... | null)[] | null | undefined'.
  Type '{ width: number; flexShrink: number; "& .MuiDrawer-paper": { width: number; boxSizing: string; }; }' is not assignable to type 'undefined'.
     95 |           </AppBar>
     96 |           <Drawer
  >  97 |             sx={{
        |             ^^
     98 |               width: drawerWidth,
     99 |               flexShrink: 0, 
    100 |               "& .MuiDrawer-paper": {

This is the component code:

        <Drawer
            sx={{
              width: drawerWidth,
              flexShrink: 0, 
              "& .MuiDrawer-paper": {
                width: drawerWidth,
                boxSizing: 'border-box',
              }
            }}
            variant="permanent"
            anchor="left"
          >

I am new to typescript and react so I am not sure why this is popping up. If I remove the width and flexShrink props, then it works. Also, if I remove the "$ .MuiDrawer-paper" and leave the other two, then also it works.

To be clear

sx={{
   width: drawerWidth,
   flexShrink: 0, 
   
   }}
   variant="permanent"
   anchor="left"
   >

works; and so does

sx={{
       
       "& .MuiDrawer-paper": {
       width: drawerWidth,
       boxSizing: 'border-box',
       }
       }}
       variant="permanent"
       anchor="left"
       >

So I am guessing that something about the nested selector is causing the issue. Could anyone guide me on what I may be missing ?