<aside> <img src="/icons/skull_yellow.svg" alt="/icons/skull_yellow.svg" width="40px" />

별다른 테크닉 없이 register만 활용하면 됨. (그냥 기본 button 컴포넌트 다루듯이)

</aside>

const { reset, register, handleSubmit, formState } = useForm<Org>({
  resolver: zodResolver(schema),
  mode: "onTouched",
});

...
<form onSubmit={handleSubmit(onSubmit)}>
  <ModalContent>
    <ModalHeader>Add new organization</ModalHeader>
    <ModalBody>
      <Input
        {...register("name")}
        autoFocus
        label="Name"
        placeholder="Enter organization name"
        isInvalid={!!formState.errors.name}
        errorMessage={formState.errors.name?.message}
        onKeyDown={onKeyDownInput}
      />
    </ModalBody>
    <ModalFooter>
      <Button color="primary" type="submit" isLoading={isPending}>
        Submit
      </Button>
    </ModalFooter>
  </ModalContent>
</form>

modal 부분은 제외하고 보면, 그냥 from안에 Input 이라는 next-ui 컴포넌트를 썼음. 이 때 register를 그냥 그대로 사용함