title: Handling checkboxes with nested array of objects
body: <p>I have a component that renders multiple checkboxes. Each checkbox is handled dynamically with their <code>checked</code> property to be assigned while rendering. I need to print/render the values of the checkboxes selected.
  This is how a sample state looks like:</p>
  <pre><code>{
          Filters: [
            {
              name: &quot;Vegetables&quot;,
              options: [
                {
                  value: &quot;tmto&quot;,
                  name: &quot;Tomato&quot;
                },
                {
                  value: &quot;ptato&quot;,
                  name: &quot;Potato&quot;
                }
              ]
            },
            {
              name: &quot;Fruits&quot;,
              options: [
                {
                  value: &quot;ornge&quot;,
                  name: &quot;Orange&quot;
                },
                {
                  value: &quot;grps&quot;,
                  name: &quot;Grapes&quot;
                }
              ]
            }
          ],
        selected: []
      }
  </code></pre>
  <p>I am mapping a category name first and then again mapping the <code>checkboxes</code> with respective values and names, something like:</p>
  <pre><code>Vegetables
  checkbox 1
  checkbox 2
  
  Fruits
  checkbox 3
  checkbox 4
  </code></pre>
  <p>I have a working snippet for the same <a href="https://codesandbox.io/s/react-functional-component-forked-wb1ew" rel="nofollow noreferrer">https://codesandbox.io/s/react-functional-component-forked-wb1ew</a> but not sure why it is unable to set the state which matches the checkbox selected.
  I am a bit confused about how to handle this nested checkboxes state.</p>
  <p>Any help to resolve this is highly appreciated.</p>