title: Issue with React hook state while working with lodash debounce
body: <p>I'm not really sure what exactly is causing the issue. So I have a component that shows the amount of pictures according to certain actions. I have a slider and a dropdown component to simulate the actions.</p>
  <p>I am using lodash debounce on the slider. So the exact issue is that I have a state to keep track of the filter with initial value say the category with dog</p>
  <pre class="lang-js prettyprint-override"><code>const initialValue = {
    filters: [
      {
        field: &quot;category&quot;,
        values: [&quot;dog&quot;]
      }
    ]
  }
  const [myFilter, setMyFilter] = useState(initialValue)
  </code></pre>
  <p>With the initial value above, the component will fetch all the pictures with category dog and display on the page. Then I am able to add a dropdown value to filter out say the image size, so then my state output as below:</p>
  <pre class="lang-js prettyprint-override"><code> myFilter = {
     filters: [
       {
         field: &quot;category&quot;,
         values: [&quot;dog&quot;]
       },
       {
         field: &quot;size&quot;,
         values: [&quot;500x500&quot;]
       }
     ]
   }
  </code></pre>
  <p>At this point my newest state should as above. I added a <code>debounce</code> for the time range so that the function looks like below</p>
  <pre class="lang-js prettyprint-override"><code>onTimeRangeChange = (value) =&gt; {
    // update range state
    setRange(value);
  }
  
  const handleSetTimeRange = (value: number[]) =&gt; {
      const merge = {
        time_range: {
          start_time: moment(startTime + value[0] * 1000).toISOString(),
          end_time: moment(startTime + value[1] * 1000).toISOString(),
        },
      };
  
      console.log(&quot;myFilter: &quot;, myFilter);
      setMyFilter({ ...myFilter, time_range: merge });
    };
  
  const handleDebounce = useCallback(debounce(handleSetTimeRange, 500), [])
  
  useEffect(() =&gt; {
    if(prevRange &amp;&amp; oneRange !== prevRange)
    {
       handleDebounce(range)
    }
  }, [range])
  </code></pre>
  <p>so <code>myFilter</code> after all is expected to be</p>
  <pre class="lang-js prettyprint-override"><code>  myFilter = {
      filters: [
       {
         field: &quot;category&quot;,
         values: [&quot;dog&quot;]
       },
       {
         field: &quot;size&quot;,
         values: [&quot;500x500&quot;]
       }
     ],
     time_range: {
          start_time: moment(startTime + value[0] * 1000).toISOString(),
          end_time: moment(startTime + value[1] * 1000).toISOString(),
     }
   }
  </code></pre>
  <p>but instead the actual value is shown as below:</p>
  <pre class="lang-js prettyprint-override"><code>myFilter = {
      filters: [
       {
         field: &quot;category&quot;,
         values: [&quot;dog&quot;]
       }
     ],
     time_range: {
          start_time: moment(startTime + value[0] * 1000).toISOString(),
          end_time: moment(startTime + value[1] * 1000).toISOString(),
     }
   }
  </code></pre>
  <p>Somehow it removed the size object under the filters. Im not sure what is actually happening, Im not very familiar with debounce and useCallback. Do they reset the state?</p>