title: Get selected value onChange in react-select
body: <p>I am using react-select package and using a custom options array to populate the data (i.e it custom labels etc.)</p>
  <p>I have seen a couple of solutions they are not using <strong>options</strong> props to set value or just use default array pattern to populate data and set <strong>value</strong> and get it <strong>onChange</strong>, however I am unable to get value in my case:</p>
  <ul>
  <li><p>If I set <strong>value</strong> prop it doesn't let me select option</p>
  </li>
  <li><p>If I pass the same <em>(option) =&gt; option.phaseText)</em> onChange, it returns it as a string</p>
  <pre><code>const HandelChange = (obj) =&gt; {
      console.log(obj);
  };
  const [dataPhase, setDataPhase] = useState([
      { phaseID: 1, phaseText: &quot;Item 1&quot; },
      { phaseID: 2, phaseText: &quot;Item 2&quot; },
      { phaseID: 3, phaseText: &quot;Item 3&quot; },
      { phaseID: 4, phaseText: &quot;Item 4&quot; },
      { phaseID: 5, phaseText: &quot;Item 5&quot; },
  ]);
  
  &lt;Select
     isSearchable
      options={dataPhase}
      getOptionLabel={(option) =&gt; option.phaseText}
      getOptionValue={(option) =&gt; option.phaseText}
      className=&quot;diMultiSelect&quot;
      classNamePrefix=&quot;diSelect&quot;
      styles={styles}
      maxMenuHeight={150}
      value={(option) =&gt; option.phaseText} // this doesn't let me click options
      onChange={() =&gt; HandelChange((option) =&gt; option.phaseText)} // this returns (option) =&gt; option.phaseText) as a string
  /&gt;
  </code></pre>
  </li>
  </ul>
  <p>I am new to React, surely I don't know all, please let me know what I am doing wrong.</p>
  <p>Thanks in advance.</p>