<MenuItem> in <Select> won't accept objects as value

It is possible to pass objects to the value of the <Select>. But the <MenuItem> won’t accept objects as a value.

let value: ObjectType = {a: 1, b: 2};
<Select value={value}>
    <MenuItem value={value}>{value.b}</MenuItem>
</Select>

TS2322: Type 'ObjectType' is not assignable to type 'string | number | string[]'.

I think the MenuItem inherits value from React.LiHTMLAttributes<HTMLElement>

Casting the object to ‘any’ will work, but is possibly not as it is intended.

Expected Behavior 🤔

MenuItem (as Select itself) should accept objects.

Current Behavior 😯

A type error.

Your Environment 🌎

Tech	Version
Material-UI	v3.9.0
React	16.7.0
TypeScript	3.2.4

[goodwin64]

Faced with the same issue. The only problem is TS checks, but if I use “ts-ignore” everything works:

export default function SelectTopic(props: ISelectTopicProps) {
  const handleChange = (event: React.ChangeEvent<{ name?: string; value: ITicketTopicOption }>) => {
    props.input.onChange(event.target.value);
  };

  return (
    <Select
      value={props.input.value}
      // @ts-ignore [1]
      onChange={handleChange}
    >
      {
        topicOptions.map((topicOption) => (
          <MenuItem
            key={topicOption.id}
            // @ts-ignore [2]
            value={topicOption}
            name={topicOption.title}
          >
            {topicOption.label}
          </MenuItem>
        ))
      }
    </Select>
  );
}

/*
[1]:
Type '(event: ChangeEvent<{ name?: string | undefined; value: ITicketTopicOption; }>) => void' is not assignable to type '(event: ChangeEvent<{ name?: string | undefined; value: unknown; }>, child: ReactNode) => void'.
  Types of parameters 'event' and 'event' are incompatible.
    Type 'ChangeEvent<{ name?: string | undefined; value: unknown; }>' is not assignable to type 'ChangeEvent<{ name?: string | undefined; value: ITicketTopicOption; }>'.
      Type '{ name?: string | undefined; value: unknown; }' is not assignable to type '{ name?: string | undefined; value: ITicketTopicOption; }'.
        Types of property 'value' are incompatible.
          Type 'unknown' is not assignable to type 'ITicketTopicOption'.

[2]:
Type 'ITicketTopicOption' is not assignable to type 'string | number | string[] | undefined'.
  Type 'ITicketTopicOption' is missing the following properties from type 'string[]': length, pop, push, concat, and 28 more.
 */

[codewarrior415]

I just did <MenuItem value={${JSON.stringify(complexObject)}}/>