Repository: material-ui
Issue: `TextField` `inputProps` not passed to `<input/>`
Labels: bug 🐛,component: text field

- [x] The issue is present in the latest release.
- [x] I have searched the [issues](https://github.com/mui-org/material-ui/issues) of this repository and believe that this is not a duplicate.

## Current Behavior 😯

**Edit** Title fully captures problem. MRE is below.

## Expected Behavior 🤔

According to the API documentation for `TextField`, `inputProps` should be passed down to the `<input/>` element. However, this does not happen, as you can see in my MRE below.

The HTML that gets output is:

```html
<div class="MuiFormControl-root MuiTextField-root">
    <div class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-formControl MuiInput-formControl">
        <div class="MuiSelect-root MuiSelect-select MuiSelect-selectMenu MuiInputBase-input MuiInput-input" tabindex="0" role="button" aria-haspopup="listbox" aria-label="should be on INPUT element">
            One
        </div>
        <input aria-hidden="true" tabindex="-1" class="MuiSelect-nativeInput" value="1">
        <svg class="MuiSvgIcon-root MuiSelect-icon" focusable="false" viewBox="0 0 24 24" aria-hidden="true"><path d="M7 10l5 5 5-5z"></path></svg>
    </div>
</div>
```

You can see the `aria-label` I pass in via `<TextField inputProps={{'aria-label':....` is being attached to the `<div/>` rather than the `<input/>`, which conflicts with the documentation.

I've also tried `InputProps` and `SelectProps={{ inputProps: { 'aria-label': ...` just to be certain. I tried tracing through the code, but I can't find the logic that decides to assign to the DIV instead of INPUT.

## Steps to Reproduce 🕹

Minimal reproducible example:

https://github.com/kylegoetz/material-ui-bug

Steps:

1. clone repo
2. npm i
3. npm start
4. localhost:3000 in browser
5. examine HTML

## Context 🔦

I'm trying to unit test my components, which use Material UI form components. I'm using @testing-library/react, which advocates for accessibility-based testing, so you would `expect(getByLabelText('my aria label')).toHaveValue(expected)` but when you `getByLabelText` on this, you get the DIV, which has no `value` property.

There are other solutions, but they closely couple the test to my implementation or otherwise fall short of accessibility-based testing, and if I switched from @material-ui, it would break all the closely-coupled tests (as it stands, switching from NativeSelect to TextField already breaks the tests because `inputProps` aren't being passed as per the documentation.

## Your Environment 🌎

<!--
  Run `npx @mui/envinfo` and post the results.
  If you encounter issues with TypeScript please include the used tsconfig.
-->
<details>
  <summary>`npx @mui/envinfo`</summary>
  
```
  System:
    OS: macOS 11.5.2
  Binaries:
    Node: 16.10.0 - /opt/homebrew/bin/node
    Yarn: 1.22.15 - /opt/homebrew/bin/yarn
    npm: 7.24.0 - /opt/homebrew/bin/npm
  Browsers:
    Chrome: 95.0.4638.69
    Edge: Not Found
    Firefox: Not Found
    Safari: 14.1.2
  npmPackages:
    @types/react:  17.0.34
    react: ^17.0.2 => 17.0.2
    react-dom: ^17.0.2 => 17.0.2
```
</details>

Browser is latest Chrome