title: Type 'RefObject<HTMLDivElement>' is not assignable to type 'RefObject<HTMLInputElement>'
body: <p>I am getting this error:</p>
  <pre><code>Type '{ placeholder: string | undefined; autoComplete: string | undefined; &quot;data-testid&quot;: string | undefined; onChange?: ChangeEventHandler&lt;HTMLInputElement | HTMLTextAreaElement&gt; | undefined; ... 282 more ...; css?: InterpolationWithTheme&lt;...&gt;; } | { ...; } | { ...; }' is not assignable to type 'DetailedHTMLProps&lt;InputHTMLAttributes&lt;HTMLInputElement&gt;, HTMLInputElement&gt;'.
    Type '{ placeholder: string | undefined; autoComplete: string | undefined; &quot;data-testid&quot;: string | undefined; onChange?: ChangeEventHandler&lt;HTMLInputElement | HTMLTextAreaElement&gt; | undefined; ... 282 more ...; css?: InterpolationWithTheme&lt;...&gt;; }' is not assignable to type 'DetailedHTMLProps&lt;InputHTMLAttributes&lt;HTMLInputElement&gt;, HTMLInputElement&gt;'.
      Type '{ placeholder: string | undefined; autoComplete: string | undefined; &quot;data-testid&quot;: string | undefined; onChange?: ChangeEventHandler&lt;HTMLInputElement | HTMLTextAreaElement&gt; | undefined; ... 282 more ...; css?: InterpolationWithTheme&lt;...&gt;; }' is not assignable to type 'ClassAttributes&lt;HTMLInputElement&gt;'.
        Types of property 'ref' are incompatible.
          Type '((instance: HTMLDivElement | null) =&gt; void) | RefObject&lt;HTMLDivElement&gt; | null | undefined' is not assignable to type 'LegacyRef&lt;HTMLInputElement&gt; | undefined'.
            Type 'RefObject&lt;HTMLDivElement&gt;' is not assignable to type 'LegacyRef&lt;HTMLInputElement&gt; | undefined'.
              Type 'RefObject&lt;HTMLDivElement&gt;' is not assignable to type 'RefObject&lt;HTMLInputElement&gt;'.
                Type 'HTMLDivElement' is missing the following properties from type 'HTMLInputElement': accept, alt, autocomplete, capture, and 51 more.ts(2322)
  </code></pre>
  <p>In this code:</p>
  <pre><code>import _ from 'lodash'
  import { TextFieldProps } from '@mui/material/TextField/TextField'
  ...
  _renderSimple (sharedProps: TextFieldProps): JSX.Element {
    const inputProps = _.omit(sharedProps, ['className', 'hintText', 'InputProps'])
    return (
      &lt;div className={sharedProps.className}&gt;
        &lt;input
          {...inputProps}
          placeholder={sharedProps.placeholder}
          autoComplete={this.props.autoComplete}
          data-testid={this.props.dataTestId}
        /&gt;
        {this._renderError()}
      &lt;/div&gt;
    )
  }
  </code></pre>
  <p>which in my opinion makes no sense, since I'm putting the <code>inputProps</code> in <code>input</code>, not in <code>div</code>. What am I missing?</p>