SelectInput generates an incomplete ref input element

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

https://github.com/mui/material-ui/blob/master/packages/mui-material/src/Select/SelectInput.js#L163
This function is returning an incomplete input dom node, which is lacking the setCustomValidity & reportValidity functions. These functions are important when trying to make use of browser native validation.
Perhaps a viable alternate implementation would be this:

    () => ({
      ...inputRef.current,
      focus: () => {
        displayRef.current.focus();
      },
      node: inputRef.current,
      value,
    })

I've initially reported an issue on react-hook-form (issue: https://github.com/react-hook-form/react-hook-form/issues/8400), before realising that the issue might best be fixed here.

Expected behavior 🤔

The setCustomValidity & reportValidity methods should be available on the ref input element.

Steps to reproduce 🕹

Steps:

1. Open https://codesandbox.io/s/react-hook-form-v7-ts-triggervalidation-forked-4w7yqd?file=/src/index.tsx
2. Click on submit.
3. Read error message (react-hook-form is expecting the setCustomValidity method to be available on the element).

Context 🔦

These functions are important when trying to make use of browser native validation.

Your environment 🌎

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