title: .focus() is not a function
body: <p>I have been trying to change input field from one to the other with no avail, when I use .focus it gives me an error of it is not a function.</p>
  
  <p>I will paste my code</p>
  
  <pre><code>import React, { useEffect } from 'react';
  import { signup } from '../../assets/images';
  import FormDiv from '../shared/Sign-in-div';
  import ImageDiv from '../shared/Image-div';
  import { Nunito32, Nunito20 } from '../shared/nunito/nunito';
  import ImageContainer from '../shared/image-container';
  import OtpField from '../shared/otp-field';
  import PinkButton from '../shared/button-color-pink';
  
  const SignUpVerification = () =&gt; {
    const fieldOne = React.createRef();
    const fieldTwo = React.createRef();
    const fieldThree = React.createRef();
    const fieldFour = React.createRef();
  
    return (
      &lt;div style={{ display: 'flex' }}&gt;
        &lt;FormDiv style={{ textAlign: 'center' }}&gt;
          &lt;Nunito32
            style={{
              display: 'inline-block',
              textAlign: 'center',
              marginRight: 236,
              marginLeft: 200,
            }}
          &gt;
            Verify your mobile number by entering the code we sent you
          &lt;/Nunito32&gt;
          &lt;div style={{ flexDirection: 'row' }}&gt;
            &lt;OtpField
              ref={fieldOne}
              style={{ marginRight: 10.5 }}
              onChange={() =&gt; fieldTwo.focus()}
            /&gt;
            &lt;OtpField
              ref={fieldTwo}
              style={{ marginRight: 10.5 }}
              onChange={() =&gt; fieldThree.focus()}
            /&gt;
            &lt;OtpField
              ref={fieldThree}
              style={{ marginRight: 10.5 }}
              onChange={() =&gt; fieldFour.focus()}
            /&gt;
            &lt;OtpField
              ref={fieldFour}
              style={{ marginRight: 10.5 }}
              onChange={() =&gt; fieldFour.focus()}
            /&gt;
          &lt;/div&gt;
  
          &lt;PinkButton style={{ marginTop: 75 }}&gt;Continue&lt;/PinkButton&gt;
          &lt;Nunito20&gt;Send again&lt;/Nunito20&gt;
        &lt;/FormDiv&gt;
        &lt;ImageContainer&gt;
          &lt;ImageDiv bg={signup} src={signup} alt="logo" /&gt;
        &lt;/ImageContainer&gt;
      &lt;/div&gt;
    );
  };
  
  export default SignUpVerification;
  </code></pre>
  
  <p>Can someone help pls. And if you know a better way to do it, Ill be grateful for leading me in the right path</p>