title: jsx-a11y returning Form label must have associated control when there is an htmlFor
body: <p>I have this component:</p>
  
  <pre><code>// @flow
  import React, { Element } from 'react';
  import styles from './Label.scss';
  import cs from 'classnames';
  
  export const Label = ({
    id,
    htmlFor,
    invalid,
    required,
    children
  }: {
    id: string,
    htmlFor: string,
    invalid: boolean,
    required: boolean,
    children: Element&lt;*&gt;
  }) =&gt;
    &lt;label
      htmlFor={htmlFor}
      id={id}
      required={required}
      className={cs(
        styles.label,
        required ? styles.required : '',
        invalid ? styles.invalid : ''
      )}
    &gt;
      {children}
    &lt;/label&gt;;
  
  Label.displayName = 'Label';
  </code></pre>
  
  <p>When I run eslint I get this error message even though there is an <code>htmlFor</code>:</p>
  
  <blockquote>
    <p>error: Form label must have associated control
    (jsx-a11y/label-has-for) at
    packages/ds-component-library/src/components/atoms/Label/Label.js:19:3:</p>
  </blockquote>