Nested Checkbox in Materialize

I am trying to make nested checkboxes with Materializejs. The problem is that when I check the outer checkbox when it is collapsed, the inner checkboxes are opened again. This is my code:

                <ul class="collapsible">
                    <li>
                        <div class="collapsible-header">
                            <i class="material-icons">arrow_drop_down</i>
                            <label>
                                <input type="checkbox" class="filled-in" />
                                <span>Filled in</span>
                            </label>
                        </div>
                        <div class="collapsible-body">
                            <i class="material-icons">arrow_drop_down</i>
                            <label>
                                <input type="checkbox" class="filled-in" />
                                <span>Filled in</span>
                            </label>
                        </div>
                    </li>
                </ul>


<script>
    document.addEventListener("DOMContentLoaded", function () {
        var elems = document.querySelectorAll(".collapsible");
        var instances = M.Collapsible.init(elems, {});
    });
</script>