I created a drop-down select with react-select. I import some defaultValues with this.returnLayers (an array with value/label couples) and I add the possible options from the state this.state.completeData.

Code :

             <SettingRow>
                <div className="selection">
                  <p>Sélectionner des couches</p>
                  <Select
                    defaultValue={this.returnLayers}
                    isMulti
                    name="layers"
                    onChange={(e) => { this.getLayers(e, this.state.categName) }}
                    className="basic-multi-select"
                    classNamePrefix="select"
                    options={this.state.completeData}
                  />
                </div>
              </SettingRow>

Everything works well, until I try to delete one of the defaultValues. When I click on one of those options, all of the defaultValues disappear. The newly selected values stay though.

I followed exactly the code from the documentation, so I don't really understand what could be wrong. Is it impossible to delete the defaultValues ? Is there a workaround ?