reset form state within dialog without useEffect?

export function CreateExpenseDialog() {
  const create = useCreateExpense();
  const route = SearchRoute.useSearchRoute();
  const form = useForm({
    create: create,
    close: route.close,
    open: route.open,
  });

  return (
    <Dialog
      open={route.view() === "open"}
      onOpenChange={(opening) => {
        if (opening) {
          route.open();
        } else {
          form.api.reset();
          route.close();
        }
      }}
    >
        <form onSubmit={prevented(() => void form.api.handleSubmit())}>
          <form.api.AppField
            name="description"
            children={(field) => (
              <field.TextField
                label="Description"
                inputProps={{
                  placeholder: "enter description",
                }}
              />
            )}
          />
          <form.api.AppForm>
            <form.api.SubmitButton>Submit</form.api.SubmitButton>
            <form.api.CancelButton onClick={route.close}>Cancel</form.api.CancelButton>
            <FieldsErrors
              className="col-span-full min-h-32 "
              metas={Object.values(form.metas)}
            />
          </form.api.AppForm>
        </form>
    </Dialog>
  );
}