[material-ui][Text Field] The label and helper text flicker and change color when another Text Field is focused

Steps to reproduce

Link to live example with ThemeProvider: https://codesandbox.io/p/sandbox/bitter-grass-tmzqt7?file=%2Fsrc%2FDemo.tsx%3A11%2C31 Link to live example with CssProvider: https://codesandbox.io/p/sandbox/sleepy-booth-34yfhk?file=%2Fsrc%2FDemo.tsx

Current behavior

When working with multiple text fields, the label and helper text flicker while focusing on any text field, and some text fields' label and helper text remain darker than others. This issue is primarily visible in dark mode (this also happens in the light mode as well), which is why I provided an example in dark mode. I have reproduced this issue using both ThemeProvider and CssVarsProvider, and it occurs in both cases. Additionally, this problem occurs only on Windows OS and appears in all major web browsers, such as Chrome, Edge, and Opera, except for Firefox.

https://github.com/mui/material-ui/assets/121926499/cc94dd9b-2ff0-47e0-af06-f3e022a1ed69

Expected behavior

The label and helper text should remain steady, without flickering or changing color.

Context

No response

Your environment

npx @mui/envinfo

``` System: OS: Windows 10 10.0.19045 Binaries: Node: 20.9.0 - C:\Program Files\nodejs\node.EXE Yarn: 1.22.19 - ~\AppData\Roaming\npm\yarn.CMD npm: 10.1.0 - C:\Program Files\nodejs\npm.CMD Browsers: Chrome: Not Found Edge: Chromium (120.0.2210.77) npmPackages: @emotion/react: ^11.11.1 => 11.11.1 @emotion/styled: ^11.11.0 => 11.11.0 @mui/base: 5.0.0-beta.24 @mui/core-downloads-tracker: 5.14.18 @mui/lab: 5.0.0-alpha.153 => 5.0.0-alpha.153 @mui/material: ^5.14.18 => 5.14.18 @mui/private-theming: 5.14.18 @mui/styled-engine: 5.14.18 @mui/system: 5.14.18 @mui/types: 7.2.9 @mui/utils: 5.14.18 @types/react: 18.2.39 react: ^18.2.0 => 18.2.0 react-dom: ^18.2.0 => 18.2.0 typescript: ~5.3.2 => 5.3.2 ```

Search keywords: Text field, Label, Helper text

mui / material-ui