[Select] Prop component + value breaks compilation for MenuItem

Combination of both prop component + prop value seems incompatible.

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

value, a valid prop for MenuItem (inherit from li native element) seems to break compilation, if provided along with component prop. No matter if component is a native HTML element, a custom component or MUI component.

Expected Behavior 🤔

You can use both props w/o typescript compilation errors.

Steps to Reproduce 🕹

As you can see in the demo, every combination should be acceptable. As you can see in the second case, component="Typography" lets you use any Typography prop along with MenuItem props. You can comment line 18 to check this out. But when it comes to value, Typescript complains for line 15

Property 'component' does not exist on type 'IntrinsicAttributes & { action?: Ref<ButtonBaseActions>; buttonRef?: Ref<unknown>; centerRipple?: boolean; disabled?: boolean; disableRipple?: boolean; ... 4 more ...; TouchRippleProps?: Partial<...>; } & { ...; } & { ...; } & CommonProps<...> & Pick<...>'

I’ve check out how MenuItem is basically a ListItem with aditional props, and the problem persists as well using this component. Probably is something with OverridableComponent interface or BaseButton, im not sure.

Context 🔦

This “value” prop, not only an acceptable prop for native element, but it is indirectly being supported as MUI documentation for Select allows you to use MenuItem as children, but I couldn’t find a demo with, also, a prop component.

Your Environment 🌎

Tech	Version
Material-UI	v4.10.0 (latest)
React	v16.13.1
Browser	83.0.4103.61
TypeScript	3.9.3

[miguelCT]

I’m not sure if what @eps1lon mentions is exactly the reason. As @ImADrafter says, it seems more a Typescript compile error than an implementation bug per se. In the JS version of the same code, there is not even an execution error or warning.

Basically, I’ve followed the Material-UI docs and examples to use the “component” prop in Typescript with the MenuItem + Link (react-router), and the result is that same compile error. So, I guess this could be one of the cases stated in the TS guide, where it says:

Not every component fully supports any component type you pass in. If you encounter a component that rejects its component props in TypeScript please open an issue. There is an ongoing effort to fix this by making component props generic.

What do you think?

[joefraley]

here we are in v5.2.4 and it doesn’t seem like Select’s have their own option components. docs still using <MenuItem/>'s: https://mui.com/components/selects/

MenuItem docs make it look like <MenuItem component="" /> should be possible: https://mui.com/api/menu-item/