title: react-select : the option `isSelected` is always true
body: <h3>when nothing is selected</h3>
  <p><a href="https://i.stack.imgur.com/53UzN.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/53UzN.png" alt="when nothing is selected" /></a></p>
  <p>It works perfectly fine, when nothing is selected.</p>
  <h3>when one option is selected (problem)</h3>
  <p><a href="https://i.stack.imgur.com/1MZy3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1MZy3.png" alt="when selected" /></a></p>
  <p>As you see above, even if I selected one option(ash), it said everything was selected.
  I did <code>console.log(isSelected)</code>, and it said everything was selected <code>true</code> ..</p>
  <h3>It should be like this...</h3>
  <p><a href="https://react-select.com/styles#select-props" rel="nofollow noreferrer">react-select selected props</a></p>
  <p>I copied a lot of code, few lines were modified.</p>
  <h2>here's my code</h2>
  <p>thank you in advance for helping me!</p>
  <p>if you have any suggestion, please hit me!</p>
  <pre class="lang-js prettyprint-override"><code>const dot = (color = '#ccc') =&gt; ({
    display: 'flex',
    alignItems: 'center',
  
    ':before': {
      backgroundColor: color,
      borderRadius: 10,
      content: '&quot; &quot;',
      display: 'block',
      marginRight: 10,
      height: 15,
      width: 15,
    },
  });
  
  const colourStyles = {
    control: (styles, { selectProps: { width } }) =&gt; ({
      ...styles,
      width: width,
    }),
    option: (styles, { data, isSelected, isFocused }) =&gt; {
      const color = chroma(data.color);
      return {
        ...styles,
        backgroundColor: isSelected
          ? data.color
          : isFocused
          ? color.alpha(0.1).css()
          : null,
        color: isSelected
          ? chroma.contrast(color, 'white') &gt; 2
            ? 'white'
            : 'black'
          : data.color,
      };
    },
    input: (styles) =&gt; ({ ...styles, ...dot() }),
    placeholder: (styles) =&gt; ({ ...styles, ...dot() }),
    singleValue: (styles, { data }) =&gt; ({ ...styles, ...dot(data.color) }),
  };
  
  
  const SelectModule = observer(({ label, value }) =&gt; {
    const [selectedOption, setSelectedOption] = useState('');
  
    const options = colorChipListStore.colorList.map((item) =&gt; ({
      color: item.hexId,
      label: item.label,
    }));
  
  
    const setColors = (color) =&gt; {
      setSelectedOption(color);
    };
  
    function customTheme(theme) {
      return {
        ...theme,
        colors: {
          ...theme.colors,
          primary: '#AD9EE5',
        },
      };
    }
  
  
  return (
      &lt;Container&gt;
        {label &amp;&amp; &lt;Label&gt;{label}&lt;/Label&gt;}
        &lt;OptionWrapper&gt;
            &lt;Select
              width='100%'
              options={options}
              styles={colourStyles}
              theme={customTheme}
              isSearchable
              onChange={setColors}
              defaultValue={selectedOption}
            /&gt;
        &lt;/OptionWrapper&gt;
      &lt;/Container&gt;
    );
  });
  </code></pre>