title: Forwarding refs by multiple levels [Typescript / React]
body: <p>I'm trying to follow atomic design principles, but I'm not sure if I'm doing it correctly.
  I have created three components: Form, ExpandableInput and Input. Input is HTML input wrapper, Expandable input is Input with dropdown and Form is just form. I want to access current input value from Form component so I'm doing ref forwarding by multiple levels. Everything works fine in Form component, but the problem is that I have to use ref.current.value in ExpandableInput component, but I'm getting following error.</p>
  <blockquote>
  <p>Property 'current' does not exist on type '((instance:
  HTMLInputElement | null) =&gt; void) | MutableRefObject&lt;HTMLInputElement
  | null&gt;'.   Property 'current' does not exist on type '(instance:
  HTMLInputElement | null) =&gt; void'.</p>
  </blockquote>
  <p>I don't know how to tell typescript that ref variable in ExpandableInput has type of Ref and is not null. I don't know if ref forwarding by multiple levels is good practice, maybe there is a better way to get input value.</p>
  <p>Example code:
  <strong>AddForm</strong></p>
  <pre><code>const Form = () =&gt; {
      // Refs
      const caRef = useRef&lt;HTMLInputElement&gt;(null);
  
      return (
          &lt;FormTemplate &gt;
              &lt;ExpandableInput
                  option={CompetenceAreaOption}
                  ref={caRef}
  
              /&gt;
          &lt;/FormTemplate&gt;
      );
  }
  
  export default AddForm;
  
  </code></pre>
  <p><strong>ExpandableInput</strong></p>
  <pre><code>const ExpandableInput = React.forwardRef&lt;HTMLInputElement, IProps&gt;((
     props,
     ref
  ): JSX.Element =&gt; {
  
      const pickInputValue = (value: string): void =&gt; {
          console.log(ref.current) // Error
          console.log(ref) // Input reference
          }
      }
  
      return (
          &lt;div&gt;
              &lt;div&gt;
                  &lt;Input
                      ref={ref}
                  /&gt;
              &lt;/div&gt;             
          &lt;/div&gt;
      );
  })
  
  export default ExpandableInput;      
  </code></pre>
  <p><strong>Input</strong></p>
  <pre><code>const Input = React.forwardRef&lt;HTMLInputElement, IProps&gt;(({
      props,
      ref
  ): JSX.Element =&gt; {
   
      return (
          &lt;input
              ref={ref}
          /&gt;
      );
  })
  
  
  export default Input;
  </code></pre>