title: react-select multiple options grouped have object as value
body: <p>So, i'm trying to add <a href="https://react-select.com" rel="nofollow noreferrer">react-select</a> component to my project. I'm using grouped options and trying to have the ability to select multiple options</p>
  
  <p>This is my component code</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>class QueueFilter extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        options: [
          {
            label: 'Partner',
            options: [
              {
                value: {
                  id: 'ABCDSC',
                  value: 'Partner1'
                },
                label: 'Partner1'
              },
              {
                value: {
                  id: 'ABCDSC',
                  value: 'Partner2'
                },
                label: 'Partner2'
              }
            ]
          },
          {
            label: 'Study',
            options: [
              {
                value: {
                  id: 'ABCDSC123',
                  value: 'Study1'
                },
                label: 'Study1'
              }
            ]
          }
        ],
        selectedFilters: []
      };
      this.fecthQueueFilters = this.fecthQueueFilters.bind(this);
      this.onFilterChange = this.onFilterChange.bind(this);
      this.applyFilter = this.applyFilter.bind(this);
    }
  
    componentDidMount(prevState, prevProps) {
      if (prevProps.queueId !== this.props.queueId) {
        this.fetchQueueFilters(this.props.queueId);
      }
    }
  
  
    onFilterChange(selectedFilters) {
      this.setState({ selectedFilters });
    }
  
    fecthQueueFilters(queueId) {
  
    }
  
    applyFilter() {
  
    }
  
    render() {
  
      const groupStyles = {
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'space-between',
      };
  
      const groupBadgeStyles = {
        backgroundColor: '#EBECF0',
        borderRadius: '2em',
        color: '#172B4D',
        display: 'inline-block',
        fontSize: 12,
        fontWeight: 'normal',
        lineHeight: '1',
        minWidth: 1,
        padding: '0.16666666666667em 0.5em',
        textAlign: 'center',
      };
  
      const formatGroupLabel = data =&gt; (
        &lt;div style={groupStyles}&gt;
          &lt;span&gt;{data.label}&lt;/span&gt;
          &lt;span style={groupBadgeStyles}&gt;{data.options.length}&lt;/span&gt;
        &lt;/div&gt;
      );
  
      const Input = (props) =&gt; {
        if (props.isHidden) {
          return &lt;components.Input {...props} /&gt;;
        }
        return (
          &lt;div style={{ border: '1px dotted black' }}&gt;
            &lt;components.Input {...props} /&gt;
          &lt;/div&gt;
        );
      };
  
      return (
        &lt;Container fluid className="main-header"&gt;
          &lt;Row&gt;
            &lt;Col xs="1"&gt;Queue Filters:&lt;/Col&gt;
            &lt;Col auto&gt;
              &lt;Select
                options={this.state.options}
                isMulti
                isClearable
                formatGroupLabel={formatGroupLabel}
                components={{Input}}
                closeMenuOnSelect={false}
                value={this.state.selectedFilters}
                onChange={this.onFilterChange}
              /&gt;
            &lt;/Col&gt;
            &lt;Col xs="1"&gt;
              &lt;Button type="button" onClick={this.applyFilter} color="success"&gt;
                &lt;Filter /&gt;
              &lt;/Button&gt;
            &lt;/Col&gt;
          &lt;/Row&gt;
        &lt;/Container&gt;
      );
    }
  }
  
  QueueFilter.propTypes = {
    queueId: PropTypes.string
  };
  
  export default QueueFilter;</code></pre>
  </div>
  </div>
  </p>
  
  <p>But when I select multiple options, only 1 is shown in the select field</p>
  
  <p><a href="https://i.stack.imgur.com/U0YlY.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/U0YlY.png" alt="enter image description here"></a></p>
  
  <p>The console shows there's 2 options selected</p>
  
  <p><a href="https://i.stack.imgur.com/kW6DB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kW6DB.png" alt="enter image description here"></a></p>
  
  <p>And, well, there's this warning in the console</p>
  
  <p><a href="https://i.stack.imgur.com/ThzCR.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ThzCR.png" alt="enter image description here"></a></p>
  
  <p>If I change the the options values to be simple strings instead of objects</p>
  
  <pre><code>this.state = {
    options: [
      {
        label: 'Partner',
        options: [
          {
            value: 'ABCDSC:Partner1',
            label: 'Partner1'
          },
          {
            value: 'ABCDSC:Partner2',
            label: 'Partner2'
          }
        ]
      },
      {
        label: 'Study',
        options: [
          {
            value: 'ABCDSC123:Study1',
            label: 'Study1'
          }
        ]
      }
    ],
    selectedFilters: []
  };
  </code></pre>
  
  <p>Well, it works as expected, but I'd rather have the object values.</p>
  
  <p>Any idea how to achieve this?</p>