title: Dropdown picker selection should be empty when adding forms dynamically
body: <p>I just want to add a form dynamically. When clicking on <code>addAdvice()</code> a new form should be added. The issue is to clear the previously selected values of the dropdown. The description text is updating fine for each form but the dropdowns are changing to <code>form1</code> when changing for <code>form2</code>.</p>
  <pre><code>return(
    &lt;View style={styles.container}&gt;
           &lt;View style={styles.fixToText}&gt;
          &lt;Text style={styles.titles}&gt;Unit:&lt;/Text&gt;
          &lt;Text style={styles.titles}&gt;Date: {date}&lt;/Text&gt;
        &lt;/View&gt;
    {adviceList.map((advice, i) =&gt; {
    return (
        &lt;View key={i}&gt;
          &lt;Text style={styles.adviceHeader}&gt;Advice{i+1}&lt;/Text&gt;
          &lt;DropDownPicker
            defaultNull
            placeholder=&quot;Select a Category&quot;
            open={open}
            value={category}
            items={items}
            searchable={true}
            setOpen={setOpen}
            setValue={setCategory}
            setItems={setItems}
            listMode=&quot;MODAL&quot;
            modalProps={{ animationType: &quot;fade&quot;, width: &quot;50%&quot;, height: &quot;100%&quot; }}
            modalContentContainerStyle={{
              backgroundColor: &quot;#fff&quot;,
              width: &quot;100%&quot;,
              height: &quot;50%&quot;,
            }}
            onChangeValue={ (value) =&gt; onCategoryChange(value, i)}
          /&gt;
          {/* &lt;Text&gt;
            {console.log(selectedValue)}
            {console.log(data)}
          &lt;/Text&gt; */}
          &lt;Separator /&gt;
          &lt;DropDownPicker
            defaultNull
            placeholder=&quot;Select a Sub Category&quot;
            open={open1}
            value={subCategory}
            items={data}
            searchable={true}
            setOpen={setOpen1}
            setValue={setSubCategory}
            // setItems={setItems1}
            listMode=&quot;MODAL&quot;
            modalProps={{ animationType: &quot;fade&quot;, width: &quot;50%&quot;, height: &quot;100%&quot; }}
            modalContentContainerStyle={{
              backgroundColor: &quot;#fff&quot;,
              width: &quot;100%&quot;,
              height: &quot;50%&quot;,
            }}
            onChangeValue={ (value) =&gt; onSubCategoryChange(value, i)}
          /&gt;
  
          &lt;Separator /&gt;
  
          {/* Resolution Box  */}
          &lt;View style={styles.textAreaContainer}&gt;
            &lt;TextInput
              style={styles.textArea}
              placeholder=&quot;Enter Advice here&quot;
              placeholderTextColor=&quot;grey&quot;
              maxLength={300}
              multiline={true}
              onChangeText={ (value) =&gt; {
                setDescription(value)
                onDescriptionChange(value, i)
              }
              }
            /&gt;
  
        {adviceList.length !== 1 &amp;&amp; 
          &lt;Button
            title=&quot;Remove&quot;
            onPress={() =&gt; removeAdvice(i)} /&gt;}
          &lt;/View&gt;
          &lt;Separator /&gt;
  
        
          {adviceList.length - 1 === i &amp;&amp;
          &lt;Button
            title=&quot;Add resolutions&quot;
            color=&quot;#0eb34b&quot;
            onPress={addAdvice}
          /&gt;}
          {/* &lt;View style={styles.fixToText}&gt;
            &lt;Button
              title=&quot;Save for later&quot;
              onPress={() =&gt; console.log(&quot;Save for later is clicked &quot;)}
            /&gt; */}
  
       
          &lt;/View&gt;
    );
    })}
         &lt;Button
              title=&quot;Submit &quot;
              onPress={() =&gt; {
                handleClick();
              }}
            /&gt;
    &lt;/View&gt;
   )
  
  var selectedCategory, selectedSubCategory, selectedDescription;
      const list = [...adviceList];
      const onCategoryChange = (value, i) =&gt; {
        selectedCategory = value;
        list[i][&quot;category&quot;] = selectedCategory;
        selectedCategory = &quot;&quot;;
        console.log(&quot;cat value&quot;, list[i][&quot;category&quot;] );
      };
  
      const onSubCategoryChange = (value, i) =&gt; {
        selectedSubCategory = value;
        console.log(&quot;subcat value&quot;, value);
        list[i][&quot;subCategory&quot;] = selectedSubCategory;
        selectedSubCategory = &quot;&quot;;
      };
  
      const onDescriptionChange = (value, i) =&gt; {
        selectedDescription = value;
        console.log(&quot;desc value&quot;, value);
        console.log(&quot;The i is&quot;, i);
        // selectedDescription = value;
        
        console.log(&quot;The list is: &quot;, list);
        list[i][&quot;description&quot;] = selectedDescription;
        selectedDescription = &quot;&quot;;
        // list[index][value] = value;
        setAdviceList(list);
      };
    
      // handle click event of the Remove button
      const removeAdvice = index =&gt; {
        const list = [...adviceList];
        list.splice(index, 1);
        setAdviceList(list);
      };
    
      // handle click event of the Add button
      const addAdvice = () =&gt; {
        category = '';
        subCategory = '';
        setAdviceList([...adviceList, { category: &quot;&quot;, subCategory: &quot;&quot;, description: &quot;&quot; }]);
      };
  </code></pre>
  <p>To put it simpler: when clicking the <code>AddAdvice</code> button the previous value of the dropdown needs to be flushed.</p>
  <pre><code>&lt;DropDownPicker
            defaultNull
            placeholder=&quot;Select a Category&quot;
            value={adviceList[i].category}
            items={items}
            searchable={true}
            setValue={setCategory}
            setItems={setItems}
            listMode=&quot;MODAL&quot;
            modalProps={{ animationType: &quot;fade&quot;, width: &quot;50%&quot;, height: &quot;100%&quot; }}
            modalContentContainerStyle={{
              backgroundColor: &quot;#fff&quot;,
              width: &quot;100%&quot;,
              height: &quot;50%&quot;,
            }}
            onChangeValue={ (value) =&gt; onCategoryChange(value, i)}
          /&gt;
  </code></pre>