title: react-select custom heading
body: <p>How to set custom component for selected value with react select, i was able to customize options but how about selected option itself, would be smart to have the same selected component as options too, any ideas? </p>
  
  <pre><code>&lt;Select 
   components={{ Option: CustomOption }}
   options={options} 
   styles={customStyles} 
  /&gt;;
  </code></pre>
  
  <p>Component:</p>
  
  <pre><code>    const CustomOption =  ({ value, label, innerProps, innerRef }) =&gt; (
          &lt;div ref={innerRef {...innerProps}&gt;
          &lt;img src={label === 'En' ? pngEn : label === 'Ru' ? pngRu : pngLt} /&gt;
         &lt;div&gt;{label}&lt;/div&gt;
  &lt;/div&gt;
  );
  </code></pre>
  
  <p>Edit, options bellow, i want to the flag would be seen then option is selected, thats probably because of custom options:</p>
  
  <pre><code>const options = [
    { value: "lt", label: "Lt" },
    { value: "en", label: "En" },
    { value: "ru", label: "Ru" },
  ];
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/JNCb3.png" rel="noreferrer"><img src="https://i.stack.imgur.com/JNCb3.png" alt="enter image description here"></a></p>