title: Trying to use react-hook-form in combination with react-input mask
body: <p>I have the following setup. My mask will show up, but when I type in it it just skips to the end of the line I am not quite sure what I am doing wrong here. I have tried putting all the props in the parent component and passing them all with a spread, That didn't work. I can provide more debugging if someone can give me an idea on where to debugg first and I'll do it.</p>
  
  <p>Thanks ahead of time</p>
  
  <pre><code>import React from "react"
  import { useForm } from "react-hook-form"
  import MaskedInput from "react-input-mask"
  
  const Quote = () =&gt; {
    const { register, handleSubmit, watch, errors } = useForm();
    const [tel, setTel] = React.useState("");
  
    render(
      &lt;MaskedInput
        mask="(780) 000-0000"
        alwaysShowMask
        onChange={(e) =&gt; setTel(e.target.value)}
        value={tel}
        name={data.title}
      &gt;
        {(inputProps) =&gt; (
          &lt;input
            ref={register({
              required: true,
              pattern: /^[\+]?[(]?[0-9]{3}[)]?[-\s\.]?[0-9]{3}[-\s\.]?[0-9]{4,6}$/im,
            })}
            value={inputProps.tel}
            name={inputProps.name}
            {...inputProps}
          /&gt;
        )}
      &lt;/MaskedInput&gt;
    );
  };
  </code></pre>