Issue toggling required state on TextField component

[seb-csoftware]

Steps to reproduce

Steps:

1. Create standard MUI TextField component with a label and required state set to true. (Asterisk should be visible)
2. Create button to toggle state of required from true to false
3. Click button to toggle state

Current behavior

Toggling required state from true to false on a standard TextField component with a label is causing the following error in :
"NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node."

Expected behavior

Asterisk should disappear from the label and required state should be at false.

Context

No response

Your environment

npx @mui/envinfo

  System:
    OS: Windows 11 10.0.22621
  Binaries:
    Node: 19.9.0 - C:\Program Files\nodejs\node.EXE
    npm: 9.6.3 - C:\Program Files\nodejs\npm.CMD
    pnpm: 9.12.3 - ~\AppData\Local\pnpm\pnpm.CMD
  Browsers:
    Chrome: Not Found
    Edge: Chromium (127.0.2651.86)
  npmPackages:
    @emotion/react: ^11.13.3 => 11.13.3 
    @emotion/styled: ^11.13.0 => 11.13.0 
    @mui/icons-material: ^6.1.6 => 6.1.6 
    @mui/material: ^6.1.6 => 6.1.6 
    @mui/system: ^6.1.6 => 6.1.6 
    @mui/x-data-grid-premium: ^7.22.2 => 7.22.2 
    @mui/x-date-pickers: ^7.22.2 => 7.22.2 
    @mui/x-date-pickers-pro: ^7.22.2 => 7.22.2 
    @mui/x-license: ^7.21.0 => 7.21.0 
    @mui/x-tree-view: ^7.22.1 => 7.22.1 
    @types/react: ^18.3.12 => 18.3.12 
    react: ^18.3.1 => 18.3.1 
    react-dom: ^18.3.1 => 18.3.1 
    typescript: ^5.6.3 => 5.6.3 

Search keywords: MuiFormLabelAsterisk MuiFormLabel MuiTextField Required

[sai6855]

@seb-csoftware I've tried to reproduce your issue based on your steps, but it's working as expected for me. can you provide reproduction please?

sandbox: https://stackblitz.com/edit/react-x95tay?file=Demo.tsx

Recording.2024-11-14.123641.mp4