title: Cannot read properties of undefined (reading 'focus') on calling focus on useRef current object
body: <p>Here I have to call useRef and have the focus method to be called on Ref object. Below is the Input.tsx component.</p>
  <pre><code>import React, { useRef, useState } from &quot;react&quot;;
  
  const Input = (props: any) =&gt; {
  
  const [text, setText] = useState&lt;string&gt;('');
  
  const inputRef = useRef&lt;any&gt;();
  
  const onChangeHandler = (e) =&gt; {
    setText(e.target.value)
  };
  
  const submitHandler = (event: React.FormEvent) =&gt; {
  event.preventDefault();
  if (!text) {
      inputRef.current.focus();
    }
  
  };  
  
  return (
      &lt;div&gt;
  &lt;form onSubmit={submitHandler}&gt;
    &lt;label htmlFor=&quot;label&quot;&gt;label&lt;/label&gt;
    &lt;input
      ref={inputRef}
      value={text}
      type=&quot;text&quot;
      id=&quot;email&quot;
      onChange={onChangeHandler}
      /&gt;
  &lt;button type=&quot;submit&quot;&gt;Submit&lt;/button&gt;
  &lt;/form&gt;
  &lt;/div&gt;
  
  
  );
  
  };
  
  export default Input;
  </code></pre>
  <p>If I don't define the useRef type to be 'any' I'm getting compile error. Where as defining it 'any' I'm getting runtime error of cannot read properties of undefined (reading 'focus'). I think I'm not initializing any value on useRef that's why I'm getting this error. But I also know I can't assign string, number or boolean value and call focus() there. How can I fix this issue. I'm using typescript by the way.</p>