title: Typescript error for data-* attributes on MaterialUI React component
body: <p>I am trying to pass a <code>data-testid</code> attribute to a Material-UI <code>Select</code> component, but I am getting the following Typescript error:</p>
  
  <blockquote>
    <p>Type '{ "data-testid": string; }' is not assignable to type 'HTMLAttributes'.
      Object literal may only specify known properties, and '"data-testid"' does not exist in type 'HTMLAttributes'.</p>
    
    <p>Select.d.ts(111, 3): The expected type comes from property 'SelectDisplayProps' which is declared here on type 'IntrinsicAttributes &amp; SelectProps'</p>
  </blockquote>
  
  <p>This is caused by the following code:</p>
  
  <pre><code>import React from "react";
  import Select from "@material-ui/core/Select";
  import MenuItem from "@material-ui/core/MenuItem";
  
  export default function MyComponent() {
      return (
          &lt;Select SelectDisplayProps={{ "data-testid": "my-component" }}&gt;
              &lt;MenuItem value="1"&gt;One&lt;/MenuItem&gt;
              &lt;MenuItem value="2"&gt;Two&lt;/MenuItem&gt;
              &lt;MenuItem value="3"&gt;Three&lt;/MenuItem&gt;
          &lt;/Select&gt;
      );
  }
  </code></pre>
  
  <p>It seems like this is not a problem when data-* attributes are passed directly to a component (e.g. <code>&lt;Select data-testid="my-component" /&gt;</code>), so the issue is with passing it to <code>SelectDisplayProps</code>.</p>
  
  <p>All <code>SelectDisplayProps</code> does is pass the props on to a child element inside <code>&lt;Select&gt;</code> (<a href="https://material-ui.com/api/select/#props" rel="noreferrer">docs</a>).</p>
  
  <p>How can I fix this error?</p>