[Menu] MenuItem improperly inherits from Reacts Button type when it shouldn't especially when used in Select

[marcusjwhelan]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

Steps:

1. Attempt to use an object array in Select component with MenuItem value being a single object.

Current behavior 😯

This error on MenuItem when trying to assign an Object to the value

Overload 3 of 3, '(props: DefaultComponentProps<ExtendButtonBaseTypeMap<MenuItemTypeMap<{}, "li">>>): Element', gave the following error.
    Type 'AT' is not assignable to type 'string | number | string[]'.

Expected behavior 🤔

Not give me a typescript error about the value not conforming to React's button value typing when the component is not a value.

Context 🔦

I am attempting to use an array of objects for my select list. I am attempting to set the value to an object.

Setting the value to as any gets rid of the problem which to me means there is a bug with the way the component is typed.

In my example codeSandbox you will see a button being used with a proper error of an object being used for the value which it is true you cannot do this. facebook/react#25311

While on the MenuItem I can and it works so the types are wrong.

Here is a link to the codeSandbox. https://codesandbox.io/s/kind-pateu-pdfin6?file=/src/index.tsx

Add in as any on the value and the error goes away.

Your environment 🌎

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

[michaldudak]

The Base UI's Select has this fixed. It contains a specific component to use within the Select: Option. It will be used to implement Material UI's Select in the future (likely starting work on it in Q3 2023).