title: How to properly use forwardRef in Typescript?
body: <p>I'm very new to React, please bear with me</p>
  <p>I have a component</p>
  <pre><code>const Avatar = forwardRef((props, ref) =&gt; {
    const {
      color,
      className,
      size,
      tag: Tag,
      ...rest
    } = props
  
    return (
      &lt;Tag
        className={classnames('avatar', {
          [className]: className,
          [`bg-${color}`]: color,
          [`avatar-${size}`]: size
        })}
        ref={ref}
        {...rest}
      &gt;
        ... //rest of codes
      &lt;/Tag&gt;
    )
  })
  
  export default Avatar
  </code></pre>
  <p>Now, I can do this in <code>javascript</code></p>
  <pre><code>&lt;Avatar size=&quot;sm&quot; color=&quot;success&quot; /&gt;
  </code></pre>
  <p>However, in Typescript I will be getting error message</p>
  <pre><code>Property 'size' does not exist on type 'IntrinsicAttributes &amp; RefAttributes&lt;any&gt;'  
  </code></pre>
  <p>Any idea what went wrong? I assume I need to pass <code>ref</code> so I do</p>
  <pre><code>const ref = React.createRef&lt;Tag&gt;();
  &lt;Avatar ref={ref} size=&quot;sm&quot; color=&quot;success&quot; /&gt;  
  </code></pre>
  <p>But I still have same issue, how do I pass <code>size</code> and <code>color</code> as props? I tried looking for answer around the internet and SO but I can't seem to find a solution, any help will be appreciated.</p>