Show API validations in the Form

{
    "json": {
        "defined": false,
        "code": "INPUT_VALIDATION_FAILED",
        "status": 422,
        "message": "INPUT_VALIDATION_FAILED",
        "data": {
            "errors": [],
            "properties": {
                "name": {
                    "errors": [
                        "Name must be at least 1 characters"
                    ]
                }
            }
        }
    }
}

{
    "json": {
        "defined": false,
        "code": "INPUT_VALIDATION_FAILED",
        "status": 422,
        "message": "INPUT_VALIDATION_FAILED",
        "data": {
            "errors": [],
            "properties": {
                "name": {
                    "errors": [
                        "Name must be at least 1 characters"
                    ]
                }
            }
        }
    }
}

function RouteComponent() {
  const {
    data: {user},
  } = useSuspenseQuery(orpc.auth.getSession.queryOptions());

  const updateNameMutation = useMutation(
    orpc.user.updateName.mutationOptions({
      onSuccess: () => {
        queryClient.invalidateQueries(orpc.auth.getSession.queryOptions());
        toast.success("Your name has been updated");
      },
    }),
  );

  const form = useForm({
    defaultValues: {name: user?.name || ""},
    onSubmit: async ({value: {name}}) => {
      updateNameMutation.mutate({name});
    },
  });

return <div>...</div>
}

function RouteComponent() {
  const {
    data: {user},
  } = useSuspenseQuery(orpc.auth.getSession.queryOptions());

  const updateNameMutation = useMutation(
    orpc.user.updateName.mutationOptions({
      onSuccess: () => {
        queryClient.invalidateQueries(orpc.auth.getSession.queryOptions());
        toast.success("Your name has been updated");
      },
    }),
  );

  const form = useForm({
    defaultValues: {name: user?.name || ""},
    onSubmit: async ({value: {name}}) => {
      updateNameMutation.mutate({name});
    },
  });

return <div>...</div>
}