title: React-select: custom Control does not render select components
body: <p>Working with <code>react-select@next</code> and following the example <a href="https://deploy-preview-2289--react-select.netlify.com/components#replaceable-components" rel="nofollow noreferrer">here</a> for custom <code>Control</code> components does not give the expected result.</p>
  
  <pre><code>import TextField from "@material-ui/core/TextField";
  import Select from "react-select";
  
  const InputComponent = (props) =&gt; {
      return (
          &lt;TextField {...props} /&gt;
      );
  };
  
  export const MaterialSelect = (props) =&gt; {
      const { suggestions, ...other } = props;
      return (
              &lt;Select
                  options={suggestions}
                  components={{
                      Control: InputComponent,
                  }}
                  {...other}
              /&gt;
      );
  };
  
  const suggestions = [
      {
          label: "Test One",
          value: "testOne",
      },
      {
          label: "Test Two",
          value: "testTwo",
      },
  ];
  
  &lt;MaterialSelect suggestions={suggestions} /&gt;
  </code></pre>
  
  <p>Using the Material-UI TextField does not open the dropdown or display any of the adornments. I also tried passing in <code>{...props.selectProps}</code> instead of <code>{...props}</code> to the <code>TextField</code> with no luck</p>
  
  <p>I also tried passing the components in individually using the <code>InputProps</code> prop for <code>TextField</code> with no luck. Using <code>menuIsOpen</code> on my <code>Select</code> component renders the menu as expected, however typing in to the <code>TextField</code> produces no results, no adornments, etc. </p>