title: react-select changing drop down indicator icon to font-awesome icon is not working
body: <p>I am trying to change the icon used for the <code>react-select</code> multi select indictor to a font-awesome icon, but it is not working. Any idea why?</p>
  
  <pre><code>import React from "react";
  import Select, { components } from "react-select";
  import { colourOptions } from "./docs/data";
  
  const Placeholder = props =&gt; {
    return &lt;components.Placeholder {...props} /&gt;;
  };
  
  const CaretDownIcon = () =&gt; {
    return &lt;i className="fas fa-caret-down" /&gt;;
  };
  
  const DropdownIndicator = props =&gt; {
    return (
      &lt;components.DropdownIndicator {...props}&gt;
        &lt;CaretDownIcon /&gt;
      &lt;/components.DropdownIndicator&gt;
    );
  };
  
  export default () =&gt; (
    &lt;Select
      closeMenuOnSelect={false}
      components={{ Placeholder, DropdownIndicator }}
      placeholder={"Choose"}
      styles={{
        placeholder: base =&gt; ({
          ...base,
          fontSize: "1em",
          color: colourOptions[2].color,
          fontWeight: 400
        })
      }}
      options={colourOptions}
    /&gt;
  );
  </code></pre>
  
  <p>The item tag is shown in the DOM, but I do not see the icon.</p>
  
  <p><a href="https://i.stack.imgur.com/kZyjF.png" rel="noreferrer"><img src="https://i.stack.imgur.com/kZyjF.png" alt="DOM"></a></p>