title: Keeping focus on controlled TextField through updates to state, but also forcing update?
body: <p>I have a controlled Material-UI TextField component that gets its value from the parent component's state. I'm not able to get the value to update without the TextField losing focus. Any help would be appreciated</p>
  <pre class="lang-js prettyprint-override"><code>export function OtherApp() {
  
      const [stateArray, setStateArray] = useState([{name: 'first', value: 'val'}, {name: 'second', value: 'val'}])
  
      const changeHandler = (e, i) =&gt; {
          let state = stateArray;
          state[i].name = e.target.value;
          setStateArray(state);
          console.dir(state);
      }
  
      return (
          &lt;div&gt;
              {stateArray.map((el, i) =&gt; {
                  return (
                      &lt;TextField
                          fullWidth
                          id={`section-${i}-namet`}
                          key={`section-${i}-namet`}
                          value={stateArray[i].name}
                          helperText='Helper Text'
                          onChange={e =&gt; changeHandler(e, i)}
                      /&gt;
                  )
              })}
          &lt;/div&gt;
      )
  }
  </code></pre>