title: Material-UI Nested Checkbox selection doesn't render change to parent in DOM
body: <p>I have a <a href="https://codesandbox.io/s/nested-checkboxs-material-ui-fvszt" rel="nofollow noreferrer">working nested checkbox example</a> I am working on implementing into my application. The logic for the checkboxs is functional enough to cover theses 7 cases</p>
  
  <pre><code>- Scenario - No children, no parent selected
    - Select the parent -&gt; select the parent and all children
    - Select a child -&gt; select that child and its parent
  - Scenario - All children and the parent selected
    - Select the parent -&gt; deselect the parent and all children
    - Select a child -&gt; deselect only that child
  - Scenario - Some children and the parent selected
    - Select the parent -&gt; select all unselected children
    - Select a child -&gt; select that child, parent remains selected
    - Deselect last child -&gt; deselect the child and deselect the parent
  </code></pre>
  
  <p>The issue I am running into is that in scenarios when the child is selected or deselected, the parent checkbox's state is updated, but the actual visual change of the checkbox isn't happening.</p>
  
  <p>From my code:</p>
  
  <pre><code>&lt;Checkbox
    disableRipple
    edge="start"
    checked={sub.checked}
    onChange={() =&gt;
      this.handleCheckClick(sub.id, parentIndex)
    }
  /&gt;
  </code></pre>
  
  <p>The Material-UI <code>&lt;Checkbox /&gt;</code> component is inside of a list of items, and each item has a subsequent list of items with their own <code>&lt;Checkbox /&gt;</code> components respectively. When I select the parent checkbox of the list the state changes properly through that <code>handleCheckClick()</code> method, and the state is updated properly, and the visual update happens as you would think.</p>
  
  <p>When the child is clicked, an ideal situation would be that the parent is then selected, which it is in the react component's state, but the visual aspect of the change isn't taking place despite the checkbox's <code>checked</code> state being mapped to state.</p>
  
  <p>The interesting part is that if I use a native input like this:</p>
  
  <pre><code>&lt;input
    type="checkbox"
    disableRipple
    edge="start"
    checked={sub.checked}
    onChange={() =&gt;
      this.handleCheckClick(sub.id, parentIndex)
    }
  /&gt;
  </code></pre>
  
  <p>The correct behavior is both displayed visually, but also in state (like it already was). I am not sure if this is an error specific to Material-UI, or a race condition, or something else happening, but I do know that the logic in the <code>handleCheckClick()</code> function is sound as changes are being displayed properly in the react state.</p>