TextField Label doesn't shrink when populated after data fetch from the server

[Jonathanperez990]

Steps to reproduce

No response

Current behavior

TextField component's label doesn't shrink automatically when react hook form's reset function is called.
It does update if I change and save my code without refreshing which makes the component rerender with the data already fetched and then the labels do shrink.
I've tried everything from setting defaultValue="" on textFields to dynamically use the shrink property but nothing's working and this shouldn't be so hard

Expected behavior

No response

Context

No response

Your environment

npx @mui/envinfo

  System:
    OS: Windows 11 10.0.22631
  Binaries:
    Node: 16.0.0 - ~\.nvm\versions\node\v16.0.0\bin\node.EXE
    npm: 7.10.0 - ~\.nvm\versions\node\v16.0.0\bin\npm.CMD
    pnpm: Not Found
  Browsers:
    Chrome
  npmPackages:
    @emotion/react: ^11.14.0 => 11.14.0 
    @emotion/styled: ^11.14.0 => 11.14.0 
    @mui/core-downloads-tracker:  6.4.1 
    @mui/material: ^6.4.1 => 6.4.1 
    @mui/private-theming:  6.4.1 
    @mui/styled-engine:  6.4.0 
    @mui/system:  6.4.1 
    @mui/types:  7.2.21 
    @mui/utils:  6.4.1 
    @mui/x-date-pickers: ^7.24.1 => 7.24.1 
    @mui/x-internals:  7.24.1 
    @types/react: ^18.3.18 => 18.3.18 
    react: ^18.0.0 => 18.3.1 
    react-dom: ^18.0.0 => 18.3.1
    typescript: ^4.9.5 => 4.9.5

Search keywords: TextField label doesn't shrink

[DiegoAndai]

Hey @Jonathanperez990, thanks for the report! Could you provide a minimal reproduction? This would help a lot. A live example would be perfect. This StackBlitz sandbox template may be a good starting point. Thank you!