title: State being overridden in react
body: <pre><code>  &lt;form onChange = {handleFilterChange}&gt;
      &lt;select name="movie"&gt;
        &lt;option value="default"&gt;Please choose a movie&lt;/option&gt;
        {state.data.map(movie =&gt; (&lt;option value={movie.title}&gt;{movie.title}&lt;/option&gt;))}
      &lt;/select&gt;
      &lt;select name="species"&gt;
        {state.appliedFilters.movie !== undefined ? [...new Set(species)].map(specie =&gt; (&lt;option value={specie}&gt;{specie}&lt;/option&gt;)):
        (&lt;option value="default"&gt;Please select a movie first)&lt;/option&gt;) }
      &lt;/select&gt;
    &lt;/form&gt;
  </code></pre>
  
  <p>I have this form above and an onChange function: </p>
  
  <pre><code>  const handleFilterChange = (e) =&gt; {
      if(e.target.value === 'default' &amp;&amp; state.appliedFilters !== undefined){
        setState({...state ,appliedFilters : {}});
      }else{
        setState({...state, appliedFilters:{[e.target.name] : e.target.value}})
      }
    }
  </code></pre>
  
  <p>When i apply a movie filter and then i make a change to the species select the movie filter goes away and the species only stays.</p>