```
fakeApiCall = ({ q = '' }) => {
  const fakeData = [
    { name: 'Alibaba', _id: 'FH567YGHJHghjh', other: 'etc' },
    { name: 'Ankama', _id: 'TYUJB8766GH66T' },
    { name: 'CNES', _id: 'FHJjgf67gghhFF' },
    { name: 'Blue Origin', _id: 'PLJHV6789ngfd2' },
    { name: 'Epic games', _id: 'DFGHJKHG67Uhuy' },
    { name: 'Free', _id: 'VGHJ56HHVHHJJj' },
    { name: 'Gameloft', _id: 'FGHJHG78TD4D43' },
    { name: 'Honeywell', _id: 'FVGHJB677BVff5' },
    { name: 'Infogrames', _id: 'BGHTHJgf5Hgggg' },
    { name: 'Jurassic Park', _id: 'jhdgze765ghG66' },
    { name: 'Kinder', _id: 'UYghjgff123333' },
    { name: 'La Poste', _id: '33777DDhhhDDDD' },
    { name: 'Microsoft', _id: 'JSGHDLoLoLoL99' },
    { name: 'Nintendo', _id: 'Jhtydejd78dde8' },
    { name: 'Orbital ATK', _id: 'KGZ4155DVXPWmp' },
    { name: 'Pied Piper', _id: 'LDZEJEJDjdjd89' },
    { name: 'Quantic Dreams', _id: 'KDEBEDEedddd89' },
    { name: 'SpaceX', _id: 'KIYDENss78908d' },
    { name: 'Sony', _id: 'KHDEED876dddds' },
    { name: 'Sigfox', _id: 'OIUJDEND64120d' },
    { name: 'Uber', _id: 'JDEhszdtgehd7d' },
    { name: 'Virgin Galactic', _id: 'KDEGBNE907ddeD' },
    { name: 'Willy Wonka Candy Company', _id: 'DEHFG7544ddd53' },
    { name: 'Xerox', _id: 'dedzrfjghv76dd' },
    { name: 'Y Combinator', _id: 'JUYTDGdedj765d' },
    { name: 'Zynga', _id: 'defz432ssscSXX' }
  ];
  return Promise.resolve(
    fakeData.filter(data => data.name.toLowerCase().indexOf(q.toLowerCase()) > -1)
  );
};

class Demo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      result1: { country: 'fr' },
      result2: { role: ['0', '1'] },
      organizations: []
    };
  }

  fetchOrganizations({ q }) {
    fakeApiCall({ q }).then(data => this.setState({ organizations: data }));
  }

  handleFilterChange1(filters) {
    this.setState({ result1: filters });
  }

  handleFilterChange2(filters) {
    this.setState({ result2: filters });
  }

  render() {
    const baseOptions = [
      {
        value: 'role',
        label: 'Role',
        subOptions: [
          { label: 'Admin', value: '2' },
          { label: 'Sigfoxer', value: '1' },
          { label: 'User', value: '0' }
        ]
      },
      {
        value: 'country',
        label: 'Country',
        subOptions: [
          { label: 'FR', value: 'fr' },
          { label: 'US', value: 'us' },
          { label: 'ES', value: 'es' }
        ]
      },
      {
        value: 'organizationId',
        label: 'Organization',
        subOptions: this.state.organizations.map(org => ({ label: org.name, value: org._id })),
        loadSubOptions: (input = '') => this.fetchOrganizations({ q: input })
      }
    ];
    return (
      <div>
        <h3>Without allowMultipleSameProp</h3>
        <FilterBar
          value={this.state.result1}
          baseOptions={baseOptions}
          onChange={this.handleFilterChange1.bind(this)}
        />
        <pre>{JSON.stringify(this.state.result1, null, 2)}</pre>
        <h3>With allowMultipleSameProp</h3>
        <FilterBar
          value={this.state.result2}
          baseOptions={baseOptions}
          onChange={this.handleFilterChange2.bind(this)}
          allowMultipleSameProp
        />
        <pre>{JSON.stringify(this.state.result2, null, 2)}</pre>
      </div>
    );
  }
}

<Demo />
```