[joy-ui] Overriding Drawer Size throws browser error in Dev build

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

  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 

Search keywords: DrawerPropsSizeOverrides JoyDrawer