Repository: material-ui
Issue: [joy-ui] Overriding Drawer Size throws browser error in Dev build
Labels: on hold,component: drawer,package: joy-ui

### Steps to reproduce

Link to live example: https://talosic.net
Note: The error is only thrown in a dev build (served under npm run dev) and not with a production build. The live example is a production build for obvious reasons so won't manifest the error

Steps:
1. Static app built using @mui/joy 5.0.0-beta.48
2. main.tsx wraps all content in a theme component

```
  <React.StrictMode>
    <MaterialCssVarsProvider theme={{ [MATERIAL_THEME_ID]: MaterialTheme}}>
      <JoyCssVarsProvider theme={JoyTheme}>
        <Provider store={store}>
          <RouterProvider router={router} />
        </Provider>
      </JoyCssVarsProvider>
    </MaterialCssVarsProvider>
  </React.StrictMode>
```

4. JoyTheme includes declaration:

```
declare module '@mui/joy/Drawer' {
  interface DrawerPropsSizeOverrides {
    "xl": true,
  }
};
```

5. JoyTheme also includes styleOverride in the extendTheme components definition:
 
```
    JoyDrawer: {
      styleOverrides: {
        root: ({ ownerState }) => ({
          ...(ownerState.size === 'xl' && {
            "--Drawer-horizontalSize": "1600px",
          }),
        }),
      },
    },
```

6. Page includes a drawer defined as follows:

```
<Drawer
    size="xl"
    anchor="right"
    variant="plain"
    open={false}
    onClose={() => {
        //
    }}
    slotProps={{
    content: {
        sx: {
            bgcolor: 'transparent',
            p: { md: 3, sm: 0 },
            boxShadow: 'none',
        },
    },
    }}
    disableEscapeKeyDown={true}
>
    <Sheet
        sx={{
            borderRadius: 'md',
            p: 2,
            display: 'flex',
            flexDirection: 'column',
            gap: 2,
            height: '100%',
            overflow: 'auto',
        }}
    >
        
    </Sheet>
</Drawer>
```

7. When size is 'xl' the browser throws an error reporting that:
Warning: Failed prop type: Invalid prop `size` of value `xl` supplied to `ForwardRef(Drawer2)`, expected one of ["sm","md","lg"].

8. The error is not thrown when 'lg' is specified.  
9. A similar size override has been defined for @mui/joy/CircularProgress with no error generated using custom and standard sizes


### Current behavior

Function is correct, and the drawer is the correct size, but an error is thrown when served in dev mode

### Expected behavior

Same functionality but without warning

### Context

Trying to allow the use of XL sized drawers

### Your environment

<details>
  <summary><code>npx @mui/envinfo</code></summary>

```
  System:
    OS: Linux 5.14 Red Hat Enterprise Linux 9.3 (Plow)
  Binaries:
    Node: 20.11.1 - /usr/bin/node
    npm: 10.2.4 - /usr/bin/npm
    pnpm: Not Found
  Browsers:
    Chrome: Version 126.0.6478.127 (Official Build) (64-bit)
    Edge: Version 126.0.2592.102 (Official build) (64-bit)
  npmPackages:
    @emotion/react: ^11.11.1 => 11.11.4 
    @emotion/styled: ^11.11.0 => 11.11.5 
    @mui/base:  5.0.0-beta.40 
    @mui/core-downloads-tracker:  5.16.4 
    @mui/joy: ^5.0.0-beta.2 => 5.0.0-beta.48 
    @mui/material: ^5.14.14 => 5.16.4 
    @mui/private-theming:  5.16.4 
    @mui/styled-engine:  5.16.4 
    @mui/system:  5.16.4 
    @mui/types:  7.2.15 
    @mui/utils:  5.16.4 
    @types/react: ^18.2.15 => 18.3.3 
    react: ^18.2.0 => 18.3.1 
    react-dom: ^18.2.0 => 18.3.1 
    typescript: ^5.1.6 => 5.5.3 
```
</details>


**Search keywords**: DrawerPropsSizeOverrides JoyDrawer