title: Using react callback ref with forwarded ref
body: <p>I have a Checkbox react component that has to support the indeterminate state, but I'm updating our components to forward refs properly. The checkbox component already uses a callback ref internally to set the indeterminate property. Here's the original component (simplified):</p>
  
  <pre class="lang-js prettyprint-override"><code>export type ICheckboxProps = {
    checked?: boolean
    indeterminate?: boolean
  } &amp; React.InputHTMLAttributes&lt;HTMLInputElement&gt;
  
  export const Checkbox: React.FC&lt;ICheckboxProps&gt; = props =&gt; {
    const { checked = false, ...rest } = props;
    return (
      &lt;input
        type="checkbox"
        checked={checked}
        ref={ref =&gt; {
          if (ref) {
            ref.indeterminate = !checked ? indeterminate! : false;
          }
        }}
        {...rest}
      /&gt;
    )
  }
  </code></pre>
  
  <p>Now, since this is a UI library, I'm trying to forward a ref as well. But that clashes with the callback ref - now I have two separate refs. Additionally, the <em>forwarded</em> ref could be a callback ref. So I can't even access the instance there to set the indeterminate property. I've tried a bunch of stuff, but no matter what I do typescript's helpful red underlines tell me that I'm wrong.</p>
  
  <p>How do I both apply the forwarded ref to the input and set the indeterminate property on the input?</p>
  
  <p>Here's it most of the way but there's an issue noted:</p>
  
  <pre class="lang-js prettyprint-override"><code>export type ICheckboxProps = {
    checked?: boolean
    indeterminate?: boolean
  } &amp; React.InputHTMLAttributes&lt;HTMLInputElement&gt;
  
  export const Checkbox = React.forwardRef&lt;HTMLInputElement, ICheckboxProps&gt;((props, inRef) =&gt; {
    const { checked = false, ...rest } = props;
    return (
      &lt;input
        type="checkbox"
        checked={checked}
        ref={ref =&gt; {
          if (ref) {
            ref.indeterminate = !checked ? indeterminate! : false;
            if (inRef) {
              if (typeof inRef === "function") {
                inRef(ref)
              } else {
                inRef.current = ref // Cannot assign to 'current' because it is a read-only property.
              }
            }
          }
        }}
        {...rest}
      /&gt;
    )
  })
  </code></pre>