title: Type 'MutableRefObject<HTMLInputElement | undefined>' is not assignable to type 'string | ((instance: HTMLInputElement | null) => void)
body: <p>I have a problem with useRef in TypeScript.<br />
  I want to type it but I get an error, like this:<br />
  <a href="https://i.stack.imgur.com/nU2oq.png" rel="noreferrer"><img src="https://i.stack.imgur.com/nU2oq.png" alt="enter image description here" /></a>
  My Container component is:</p>
  <pre><code>    const HeaderContainer: React.FC = () =&gt; {
      const addressElement = useRef&lt;HTMLInputElement | undefined&gt;();
      
          const handleCopy = useCallback(() =&gt; {
              if (addressElement.current !== undefined) {
                  addressElement.current.select();
                  document.execCommand(&quot;copy&quot;);
              }
          }, [addressElement]);
      return &lt;HeaderUI
          addressElement={addressElement}
          handleCopy={handleCopy} /&gt;
  }
  </code></pre>
  <p>And UI component is:</p>
  <pre><code>interface IProps {
      handleCopy: (event: React.MouseEvent) =&gt; void,
      addressElement: React.MutableRefObject&lt;HTMLInputElement | undefined&gt;,
  }
  const HeaderUI: React.FC&lt;IProps&gt; = ({
                                          handleCopy, addressElement
                                      }) =&gt; {
  return &lt;div className={classes.Header}&gt;
          &lt;div className={classes[&quot;Header-Section&quot;]}&gt;
              &lt;span className={classes[&quot;Section-Title&quot;]}&gt;Персональный адрес кошелька:&lt;/span&gt;
              {address &amp;&amp; &lt;input
                type=&quot;text&quot;
                className={classes[&quot;Section-Value&quot;]}
                ref={addressElement}
                value={address}
                readOnly/&gt;}
          &lt;/div&gt;
          &lt;CopyLinkButtonContainer onClick={handleCopy}/&gt;
      &lt;/div&gt;;
  }
  </code></pre>
  <p>Can you help please to fix this problem?</p>
  <p>Thanks.</p>