joyui custom variant is not usable

Question

I'm switching from material-ui to joy-ui and wanted to create new varaints. For that I've tried to replicate the example from the documentation. I've created a joy-ui.d.ts file with

declare module '@mui/joy/Sheet' {
  interface SheetPropsVariantOverrides {
    glass: true;
  }
}

in the tsconfing I've added my joy-ui.d.ts file into the include array after that I've used the extend

my customTheme.ts looks like this

import {extendTheme} from '@mui/joy/styles'

export function customTheme(mode:string){
    return extendTheme({
      components: {
        JoySheet: {
          styleOverrides: {
            root: ({ ownerState, theme }) => ({
              ...(ownerState.variant === 'glass' && {
                background: 'rgba(255, 255, 255, 0.1)', // semi-transparent background
                backdropFilter: 'blur(5px)', // blur effect
                border: '1px solid rgba(255, 255, 255, 0.3)', // subtle border
                color: theme.vars.palette.text.primary,
                boxShadow: '0 4px 30px rgba(0, 0, 0, 0.1)', // optional shadow
              }),
            }),
          },
        },
      },
    });
}

the new variant glass is not available which it should be according to the documentation. I'm wondering what I'm doing wrong. I also had the declare module lines in the theme file but it didn't solve the issue.

I tried to create a codeSandbox. https://codesandbox.io/p/sandbox/wonderful-night-wqmf35 As you can See during the build of the dev env the following Error appears.

./app/csTheme.ts:20:29 Type error: This comparison appears to be unintentional because the types 'OverridableStringUnion<VariantProp, ButtonPropsVariantOverrides> | undefined' and '"csMedium"' have no overlap.

Type error: No overload matches this call. Overload 1 of 3, '(props: OverrideProps<ExtendButtonTypeMap<ButtonTypeMap<{}, "button">>, "a">): Element', gave the following error. Type '"csMedium"' is not assignable to type 'OverridableStringUnion<VariantProp, ButtonPropsVariantOverrides> | undefined'. Overload 2 of 3, '(props: { component: ElementType; } & ButtonSlotsAndSlotProps & { action?: Ref<{ focusVisible(): void; }> | undefined; color?: OverridableStringUnion<ColorPaletteProp, ButtonPropsColorOverrides> | undefined; ... 11 more ...; loadingPosition?: "center" | ... 2 more ... | undefined; } & Omit<...>): Element | null', gave the following error. Type '"csMedium"' is not assignable to type 'OverridableStringUnion<VariantProp, ButtonPropsVariantOverrides> | undefined'. Overload 3 of 3, '(props: DefaultComponentProps<ExtendButtonTypeMap<ButtonTypeMap<{}, "button">>>): Element | null', gave the following error. Type '"csMedium"' is not assignable to type 'OverridableStringUnion<VariantProp, ButtonPropsVariantOverrides> | undefined'.