Как сделать чтобы react input mask работал с react hook forms?

Question

[tostershmoster]

Закомментированный код делает маску для номера телефона, но при этом перестаёт сохраняться новый номер. Видимо ref как-то влияет на логику react hook form. Как это исправить?

const Profile = () => {

  const { userInfo } = useGetCurrentUserInfo();
  const { register, handleSubmit } = useForm<IFormInputs>();
  // const inputRef = useMask({
  //   mask: '+7 (___) ___-__-__',
  //   replacement: { _: /\d/ },
  // });

  // ...

  return (

            <form
              onSubmit={handleSubmit(onSubmitName)}
              action=""
            >
            // ...
                  <div>
                    <label
                      htmlFor="phone"
                    >
                      Телефон
                    </label>
                    <input
                      {...register('phone')}
                      defaultValue={userInfo?.phone}
                      autoComplete="off"
                      name="phone"
                      // ref={inputRef}
                      type="text"
                      id="phone"
                      aria-invalid={false}
                    />
                  </div>


              <Button variant="destructive">
                Сохранить
              </Button>
            </form>
      // ...
  );
};

export default Profile;

Answer 1

[Dosya]

<Controller
       control={control}
       name='phone'
       render={({field}) => (
              <InputMask name='companyTelephone' value={field.value} onChange={field.onChange} />
            )}
      />

Попробуй так