title: Update state value in deep nested .map
body: <p><strong>The state</strong> <br/>
  <code>const [config, setConfig] = useContext(ConfigContext)</code></p>
  <p><strong>The .map on the config state</strong> <br/></p>
  <pre><code>                {config[categoryNumber]?.config?.map((x: ConfigParam, i: number) =&gt;
                                  &lt;tr key={i}&gt;
                                      &lt;td&gt;{x?.desc}&lt;/td&gt;
                                      &lt;Switch
                                          checked={x.value}
                                          onChange={handleChange()}
                                      /&gt;
                                      &lt;td&gt;{x?.unit}&lt;/td&gt;
                                  &lt;/tr&gt;
                              )}
  
  </code></pre>
  <p><strong>handleChange() function</strong></p>
  <pre><code>    const handleChange = () =&gt; {
      /* 
        The desire is that this function will update the value of the original array(the config state) 
         What is the best practice for achieving this behavior? 
      */
      }
      
  
  </code></pre>
  <p><strong>The config state object</strong> <br/>
  <a href="https://i.stack.imgur.com/w8yr7.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/w8yr7.png" alt="The config state object" /></a></p>
  <p>Any alternative suggestions for a solution is</p>