Setting values asynchronously in form context does not update the label

[falk-stefan]

Steps to reproduce

I am using react-form in combination with the TextField component:

const { register, handleSubmit, reset, formState, watch, setValue } = useForm({
  mode: 'all',
  defaultValues: {
    [label]: value,
  },
});

// ..
<TextField {...register(label, { ...validation })} />

The problem: If value is loaded asynchrounously, the label on top of the text component won't move to the top:

I've already tried to setValue:

useEffect(() => {
  setValue(label, value);
}, [label, setValue, value]);

but that didn't work either. It looks like TextField is not reacting to the underlying value changing? Or is this something that's caused by react-form?

Current behavior

No response

Expected behavior

No response

Context

No response

Your environment

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Search keywords: useform, textfield, label

[mj12albert]

@falk-stefan Do you mean react-hook-form?
BTW could you share a repro (eg in Codesandbox)?