MaterialUI MenuItem expanding value prop types

Question

I need to pass null in value but I get an error, how can I extend this type?

TS2769: No overload matches this call.   Overload 1 of 3, '(props: { href: string; } & { autoFocus?: boolean | undefined; classes?: Partial | undefined; dense?: boolean | undefined; disabled?: boolean | undefined; disableGutters?: boolean | undefined; divider?: boolean | undefined; selected?: boolean | undefined; sx?: SxProps<...> | undefined; } & Omit<...> & CommonProps & Omit<...>): Element', gave the following error.     Type '{ children: ReactNode; value: null; }' is not assignable to type 'IntrinsicAttributes & { href: string; } & { autoFocus?: boolean | undefined; classes?: Partial | undefined; dense?: boolean | undefined; ... 4 more ...; sx?: SxProps<...> | undefined; } & Omit<...> & CommonProps & Omit<...>'.       Property 'value' does not exist on type 'IntrinsicAttributes & { href: string; } & { autoFocus?: boolean | undefined; classes?: Partial | undefined; dense?: boolean | undefined; ... 4 more ...; sx?: SxProps<...> | undefined; } & Omit<...> & CommonProps & Omit<...>'.   Overload 2 of 3, '(props: { component: ElementType; } & { autoFocus?: boolean | undefined; classes?: Partial | undefined; dense?: boolean | undefined; ... 4 more ...; sx?: SxProps<...> | undefined; } & Omit<...> & CommonProps & Omit<...>): Element', gave the following error.     Property 'component' is missing in type '{ children: ReactNode; value: null; }' but required in type '{ component: ElementType; }'.   Overload 3 of 3, '(props: DefaultComponentProps<ExtendButtonBaseTypeMap<MenuItemTypeMap<{}, "li">>>): Element', gave the following error.     Type 'null' is not assignable to type 'string | number | readonly string[] | undefined'.

<MenuItem value={null}>
  Menu Item
</MenuItem>

Answer 1

The last sentence in the stacktracke already shows you why this error is thrown. The value property only accepts values of type 'string | number | readonly string[] | undefined'.

So passing null is not allowed. Can you change your code to pass undefined ?

<MenuItem value={undefined}>
  Menu Item
</MenuItem>