Phone mask (React IMask) does not work correctly with using React Hook Form

Question

I am using IMask for phone input. And I also use react-hook-form. But the value does not update correctly. For example if I write 1234567 (with masked - 123-45-67) it returns wrong values.

Firstly I think the reason is react-hook-form, but after I have seen console warning.

Element value was changed outside of mask. Syncronize mask using `mask.updateValue()` to work properly.
o 

Firstly I think the reason is react-hook-form, but after I have seen console warning.

Element value was changed outside of mask. Syncronize mask using `mask.updateValue()` to work properly.
o 

I tried to write some codes with updateValue(), but all my attemps dont work. What is right coding for this?

My codes

  const {handleSubmit, register, control, formState: { errors },} = useForm({
    resolver: yupResolver(schema),
  });

    const phoneInput = useMemo(
    () => (
      <PhoneMaskInput
        control={control}
        register={register}
        name="phone"
        inputName="Mobil nömrəniz"
        id="phone"
        placeholder="Mobil nömrə"
        required
        error={errors?.phone?.message}
      />
    ),
    [errors.phone],
  );

<form onSubmit={handleSubmit(onSubmit)} noValidate>
        {phoneInput}
        <button type="submit">Daxil olun</button>
 </form>

Imask Component

import { useRef } from 'react';
import { IMaskInput } from 'react-imask';
import { Controller } from 'react-hook-form';

const PhoneMaskInput = ({ control, name, inputName, placeholder }) => {
  const ref = useRef(null);
  const inputRef = useRef(null);

  return (
      <div className="input-container">
        <Controller
          name={name}
          control={control}
          defaultValue=""
          render={({ field }) => (
            <IMaskInput
              mask="000-00-00"
              placeholder={placeholder}
              unmask={true}
              ref={ref}
              {...field}
              classID={id}
              className="imask-input"
              inputRef={inputRef}
              onAccept={(value) => field.onChange(value)}
            />
          )}
        />
      </div>
  );
};

export default PhoneMaskInput;