Form state is inconsistent when using with server action

const [{ successReturn, formState }, action, isSubmitting] = useActionState(
  submitForm,
  { formState: initialFormState },
);

const form = useForm({
  ...formOptions,
  defaultValues,
  transform: useTransform(
    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
    (baseForm) => mergeForm(baseForm, formState!),
    [formState],
  ),
});

<form.Subscribe selector={({ isSubmitted }) => isSubmitted}>
  {(isSubmitted) => {
    // display a dialog after submit success
  }}
</form.Subscribe>