[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

  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

Start by reproducing the issue in the linked CodeSandbox Demo.tsx examples, comparing ThemeProvider and CssVarsProvider with multiple Text Fields. Check the reported Windows behavior in Chromium-based browsers and Firefox; done means the label and helper text remain steady and keep the expected color while another field is focused.