title: How to disable selected values from getting displayed in input bar in react-select?
body: <pre><code>const options = [
    { value: 'chocolate', label: 'Chocolate' },
    { value: 'strawberry', label: 'Strawberry' },
    { value: 'vanilla', label: 'Vanilla' }
  ];
  
  const Option = props =&gt; { 
    //const temp = "some";
    //
    return ( 
    &lt;div&gt; 
      &lt;components.Option {...props}&gt; 
        &lt;input type="checkbox" checked={props.isSelected} onChange={() =&gt; null} /&gt; 
        &lt;label&gt;{props.value}&lt;/label&gt; 
      &lt;/components.Option&gt;
    &lt;/div&gt; 
    ); 
  };
  </code></pre>
  
  <p>Currently my code looks like above, what it does is, it is displaying something like this
  <a href="https://i.stack.imgur.com/VOXi8.png" rel="nofollow noreferrer">ScreenShot</a></p>
  
  <p>I don't want to display selected values in search input bar.Is there any way to disable selected option from getting displayed in input bar ?</p>
  
  <p>Code for Select Bar </p>
  
  <pre><code>&lt;Select components={{ Option }} isMulti closeMenuOnSelect={false} hideSelectedOptions={false} options={options} /&gt;
  </code></pre>