title: React Hook useCallback not updating State value
body: <p>I'm new to React Hooks. I have a UI with multiple inputs with values in an object.  I create the UI with a loop, so I would like to have a single callback for the updating the inputs.<br />
  <br><a href="https://i.stack.imgur.com/ah1PF.png" rel="noreferrer"><img src="https://i.stack.imgur.com/ah1PF.png" alt="enter image description here" /></a><br />
  <br>The &quot;Shop&quot; input uses it's own callback and successfully updates the state.  But the &quot;Product&quot; inputs never update the state. I don't really understand why these two callbacks behave differently.</p>
  <p>The code is below.  The problem is in the <code>handleChange</code> callback.</p>
  <pre><code>import React, { useCallback, useState, useEffect } from &quot;react&quot;;
  import { TextField, Form } from &quot;@shopify/polaris&quot;;
  
  export default function TextFieldExample() {
    const [values, setValues] = useState({
      &quot;prod-0&quot;: &quot;Jaded Pixel&quot;,
      &quot;prod-1&quot;: &quot;blue diamonds&quot;
    });
    const [shop, setShop] = useState(&quot;Joe's house of pancakes&quot;);
  
    const handleChangeShop = useCallback(newName =&gt; {
      setShop(newName);
    }, []);
  
    const handleChange = useCallback((newValue, id) =&gt; {
        console.log(&quot;Pre: values:&quot;, values);
        console.log(id, newValue);
        const newProds = values;
        newProds[id] = newValue;
        setValues(newProds);
        console.log(&quot;Post: newProds:&quot;, newProds);
      }, [values]);
  
    useEffect(() =&gt; {    // observing if State changes
      console.log(&quot;in useEffect: shop:&quot;, shop); // this gets called and is updated when changed.
      console.log(&quot;in useEffect: values:&quot;, values); // this never gets called or updated.
    }, [values, shop]);
  
    const items = [];
    Object.keys(values).forEach(function(prod) {
      items.push(
        &lt;TextField label={&quot;Product &quot; + prod.substr(5)} id={prod} value={values[prod]} onChange={handleChange} /&gt;
      );
    });
    return (
      &lt;Form&gt;
        &lt;TextField label=&quot;Shop&quot; id=&quot;shop&quot; value={shop} onChange={handleChangeShop}/&gt;
        {items}
      &lt;/Form&gt;
    );
  }
  </code></pre>
  <p>Code Sandbox is here: <a href="https://codesandbox.io/s/fast-tdd-1ip38" rel="noreferrer">https://codesandbox.io/s/fast-tdd-1ip38</a><br />
  Try it out and look at the console.</p>