Checkbox expands another checkboxes when checked not working reactjs

I have a mapping function which shows JSON values into checkboxes, I'm tried to add the children of these values as checkboxes under the current checkboxes, and it worked fine, but what I am trying to do now is make the show the 2 children checkbox once the parent checkbox is clicked.

I have Side Collection 1 and under it there are children (side 1 and side 2), what I tried but couldn't do is show (side 1 and side 2 checkboxes) once (Side Collection 1 checkbox) is checked, the checkbox values are passed as props from Checkbox.js to Itemlist.js where the fetch/map happens. Would Appreciate it if anyone can explain or demonstrate how this can be achieved.

I have done a the function i want in vanillajs but im not sure how to add it to my react app specially that is within a mapping function, im new to react

Function snippet: https://codepen.io/alaafm/pen/eXGZbO?editors=1010

React Live Snippet: https://codesandbox.io/embed/5w8vwwmn5p?fontsize=14

Checkbox.js

 class Checkboxes extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <form className="form">
        <div>
          <h2>{this.props.title}</h2>
          <div className="inputGroup">
            <input
              id={this.props.childk + this.props.name}
              name="checkbox"
              type="checkbox"
            />
            <label htmlFor={this.props.childk + this.props.name}>
              {this.props.name}{" "}
            </label>
          </div>{" "}
          {this.props.options &&
            this.props.options.map(item => {
              return (
                <div className="inputGroup2">
                  {" "}
                  <div className="inputGroup">
                    <input
                      id={this.props.childk + (item.name || item.description)}
                      name="checkbox"
                      type="checkbox"
                    />
                    <label
                      htmlFor={
                        this.props.childk + (item.name || item.description)
                      }
                    >
                      {item.name || item.description}{" "}
                      {/** <img src={this.props.img} alt="" /> <span className="pricemod">{props.childprice} SAR</span>
                       */}
                    </label>
                  </div>
                </div>
              );
            })}
        </div>
      </form>
    );
  }
}

export default Checkboxes;

Itemlist.js

...
  <div>
            {selectedMod &&
              selectedMod.children &&
              selectedMod.children.map((item, index) => (
                <Checkboxes
                  key={index}
                  name={item.name || item.description}
                  myKey={index}
                  options={item.children}
                  childk={item.id}
                  limit={item.max}
                />
              ))}
          </div>  
...

JS Function which i want to add

  const myCheck2 = document.getElementById("check2");
  const dib = document.getElementById("dib");
function change() {
  if (myCheck2.checked) {
      dib.style.display = "block";
          dib2.style.display = "block";

  }
  else{
    dib.style.display = "none";
    dib2.style.display = "none";
   }
}
function func2() {
  if (this.checked) {
     myCheck2.checked = false;
    dib.style.display = "none";
  }
  else {
    dib.style.display = "block";
    myCheck2.checked = true;
  }
}

myCheck2.addEventListener('click', change);