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

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. https://github.com/facebook/react/issues/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 🌎

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

The issue centers on the MenuItem and Select TypeScript types; begin by reproducing the error with the linked CodeSandbox and tracing MenuItem's inherited React button typing. Done means an object-valued MenuItem in Select type-checks without as any, while button values retain their existing constraint.