Repository: material-ui
Issue: [Select] Error prop not changing Select component text color. Using with react-hook-form
Labels: bug 🐛,component: select,package: material-ui

### Duplicates

- [X] I have searched the existing issues

### Latest version

- [X] I have tested the latest version

### Current behavior 😯

![image](https://user-images.githubusercontent.com/59772900/142782502-18e7141e-9789-4aed-9c07-1ee0e6afbaa3.png)

When error = true, the label of <Select /> remains text primary color instead of turning to text error color.

### Expected behavior 🤔

![image](https://user-images.githubusercontent.com/59772900/142782671-870285a9-adf8-48c0-a45c-bb39cfedfd39.png)

when error prop = true, the whole <Select /> component should be in error color.

### Steps to reproduce 🕹

UPDATE: code sandbox fixed.
https://codesandbox.io/s/jolly-lamport-x8l01

FormInputDropdown.js component
```
import React from "react";
import { Controller } from "react-hook-form";
import {
  FormControl,
  FormHelperText,
  InputLabel,
  MenuItem,
  Select,
} from "@mui/material";

const options = [
  {
    label: "0",
    value: "0",
  },
  {
    label: "1",
    value: "1",
  },
  {
    label: "2",
    value: "2",
  },
];

export const FormInputDropdown = ({ name, control, label }) => {
  const generateSingleOptions = () => {
    return options.map((option) => {
      return (
        <MenuItem key={option.value} value={option.value}>
          {option.label}
        </MenuItem>
      );
    });
  };

  return (
    <FormControl style={{ width: "100%" }}>
      <InputLabel id={`${label}_label`}>{label}</InputLabel>
      <Controller
        render={({ field: { onChange, value }, fieldState }) => (
          <React.Fragment>
            <Select
              labelId={`${label}_label`}
              label={label}
              onChange={onChange}
              value={value}
              error={!!fieldState.error}
            >
              {generateSingleOptions()}
            </Select>
            {fieldState.error ? (
              <FormHelperText error>{fieldState.error?.message}</FormHelperText>
            ) : null}
          </React.Fragment>
        )}
        control={control}
        name={name}
        rules={{ required: `Please select a ${label}` }}
      />
    </FormControl>
  );
};
```

use code
```
<FormInputDropdown
  name="dropdownExample"
  control={control}
  label="Example"
/>
```

### Context 🔦

Trying to achieve a uniform styling for my form validation.

### Your environment 🌎

<details>
  <summary>`npx @mui/envinfo`</summary>

```
System:
    OS: Linux 5.11 Ubuntu 20.04.3 LTS (Focal Fossa)
  Binaries:
    Node: 16.13.0 - ~/.asdf/installs/nodejs/16.13.0/bin/node
    Yarn: Not Found
    npm: 8.1.0 - ~/.asdf/plugins/nodejs/shims/npm
  Browsers:
    Chrome: 96.0.4664.45
    Firefox: 94.0
  npmPackages:
    @emotion/react: ^11.6.0 => 11.6.0 
    @emotion/styled: ^11.6.0 => 11.6.0 
    @mui/base:  5.0.0-alpha.55 
    @mui/icons-material: ^5.1.0 => 5.1.0 
    @mui/material: ^5.1.1 => 5.1.1 
    @mui/private-theming:  5.1.1 
    @mui/styled-engine:  5.1.1 
    @mui/styles: ^5.1.1 => 5.1.1 
    @mui/system:  5.1.1 
    @mui/types:  7.1.0 
    @mui/utils:  5.1.1 
    @types/react:  17.0.35 
    react: ^17.0.2 => 17.0.2 
    react-dom: ^17.0.2 => 17.0.2 
    typescript:  4.4.4
```
</details>

Using Chrome Browser.