Why do I have Notistack TS error with custom component?

Question

I'm adding custom component to notistack as from notistack docs but with one additional field 'description' which I need to receive in props.

import { type CustomContentProps, SnackbarContent } from 'notistack';
import React from 'react';
import { type AlertColor } from '...';
import { Alert } from '...;

interface NotistackVariantsProps extends CustomContentProps {
  description?: string;
}

export const NotistackVariants = React.forwardRef<HTMLDivElement, NotistackVariantsProps>(
  (props, ref) => {
    const {
      // You have access to notistack props and options 
      id,
      message,
      // as well as your own custom props 
      description,
      variant,
      ...other
    } = props;

    return (
      <SnackbarContent ref={ref} role='alert' {...other}>
        <Alert
          id={`${id}`}
          severity={variant as AlertColor}
          variant='filled'
          description={description}
          title={message as string}
        />
      </SnackbarContent>
    );
  },
);

And wrapping my App also as from docs:

          <SnackbarProvider
            maxSnack={3}
            Components={{
              success: NotistackVariants,
              error: NotistackVariants,
            }}
          >
            <App />
          </SnackbarProvider>

Usage:

import { enqueueSnackbar } from 'notistack';

      enqueueSnackbar(title, {
        variant: 'error',
        description: detail, -----> TS error here
        autoHideDuration: OTHER_SEVERITY_TIMEOUT,
      });

But I receive TS error when pass description (attached screenshot)enter image description here

Can anyone help me with this, please ? Thanks.

Tried to pass it in different ways.

Answer 1

you can solve it with such code:

declare module 'notistack' {
  interface OptionsObject {
    description: string;
  }
}

Another example can be found here: https://notistack.com/features/customization