Mapping or showing checkbox inside a checkbox ReactJS

I have a mapping function which shows JSON values into checkboxes, I'm trying to add the children of these values as checkboxes under the current checkboxes, below is how the json looks like, I have Side Collection 1 and under it there is children (side 1 and side 2), what I tried but couldn't do is add 2 new checkboxes with the new values (e.g. side 1 and side 2) under the current checkbox with the current value (Side Collection 1), the current 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.

Live Snippet: https://codesandbox.io/embed/jmmyxzor5?fontsize=14

Data.json

 ......
    {
                        "type": "group",
                        "description": "Side Collection 1",
                        "children": [
                          {
                            "type": "ingredient",
                            "name": "Side 1"
                          },
                          {
                            "type": "ingredient",
                            "name": "Side 2"
                          }
,,,,

Checkbox.js

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

  render() {
    const id = this.props.childId + this.props.childp;

    return (
      <form className="form">
        <div>
          <h2>{this.props.title}</h2>
          {this.props.options &&
            this.props.options.map(item => {
              return (
                <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}
                  </label>
                </div>
              );
            })}
        </div>
      </form>
    );
  }
}

export default Checkboxes;

Itemlist.js

...

else {
      const selectedChild = activelist.children[this.state.selected];
      const selectedItem = selectedChild.children[this.state.itemSelected];

      const selectedMod =
        selectedItem.children && selectedItem.children.length
          ? selectedItem.children[0]
          : null;

      return (
        <div>
          <div />
          <div onClick={this.toggle}>
            <div className="row">
              {selectedChild &&
                selectedChild.children &&
                selectedChild.children.length &&
                selectedChild.children.map((item, index) => (
                  <Item
                    className="person"
                    key={index}
                    Title={item.name}
                    imgSrc={item.image_url}
                    onClick={this.handleClick}
                    index={index}
                    Desc={item.description}
                    Price={item.base_price}
                    dPrice={item.display_price}
                   />
                ))}
            </div>
          </div>
          <div>
            <Drawer
              open={this.state.open}
              onRequestClose={this.toggle}
              onDrag={() => {}}
              onOpen={() => {}}
              allowClose={true}
              modalElementClass="HugeList"
              containerElementClass="my-shade"
              parentElement={document.body}
              direction="bottom"
            >
              <div>
                {selectedItem &&
                  selectedItem.children &&
                  selectedItem.children.map((item, index) => (
                    <Checkboxes
                      key={index}
                      title={item.name || item.description}
                      myKey={index}
                      options={item.children}
                      childk={item.id}
                    />
                  ))}
              </div>
            </Drawer>
          </div>
        </div>
      );
    }
  }
}

export default ItemList;

...