changes material-ui checkbox state checked, unchecked or indeterminated based on other checkbox click, without using state in reactjs

i am using material-ui checkbox, i need to change checkbox state programmatically checked, unchecked or indererminate based on other checkbox clicked. there can be a list of checkboxes what i need to change, and i do not want to use state in react.

import React from 'react'
import Checkbox from '@material-ui/core/Checkbox';

export default class CheckboxesTest extends React.Component {
    onChange = (e) => {
        let cbs = document.getElementById("checkboxId").querySelectorAll("input[type='checkbox']");
        for (let i = 0; i > cbs.length; i++)
            cbs[0].checked = true;
    }

    render() {
        return (
            <div>
                <Checkbox
                    defaultChecked
                    onChange={this.onChange}
                />
                <div id="checkboxId">
                    <Checkbox />
                    <Checkbox />
                </div>
            </div>
        )
    }
}

when i used browser default checkbox then it works,

import React from 'react'
import Checkbox from '@material-ui/core/Checkbox';

export default class CheckboxesTest extends React.Component {
    onChange = (event) => {
        let elem = document.getElementById("checkboxId").querySelectorAll("input[type='checkbox']");
        for (let i = 0; i < elem.length; i++) {
            elem[i].indeterminate = false
            elem[i].checked = event.target.checked;
        }
    }

    render() {
        return (
            <div>
                <Checkbox
                    defaultChecked
                    onChange={this.onChange}
                />
                <div id="checkboxId">
                    <input type="checkbox" />
                    <input type="checkbox" />
                </div>
            </div>
        )
    }
}

thanks in advance