How to conditionally render extra form options on checking dynamically generated check boxes in React?

can anyone help, i'm trying this as a learning exercise in React but i'm really stuck.

I have 3 checkboxes on a child component that i have rendered dynamically using an array of options in state (in the parent component):

What i need to be able to do is, as per the below image: click on each checkbox and get further options.

https://discourse-user-assets.s3.dualstack.us-east-1.amazonaws.com/original/3X/d/3/d385407399b0fa130741e653c9650ff9953282df.png

The checked options and the sub options (not just dropdowns, the third checkbox has input fields) all need to be available in state so i can collect them up and post them to a database

What i have so far is the below:

Array of options in state:

sowType: [
        "ProductSow",
        "Teradata Customer SOW",
        "Custom Professional Services SOW"
      ]

Final rendered checkboxes:

https://discourse-user-assets.s3.dualstack.us-east-1.amazonaws.com/original/3X/4/5/45702836b84abe764917f4bdf5172258f4d3e39c.png

My problem is, i don't know what to do next. I have dynamically rendered the initial 3 check boxes but i don't know how to add the conditional rendering to get the sub boxes to appear on clicking the check boxes) and add the info selected from them to state.

i.e. can i only add the conditional rendering on checkboxes that have NOT been dynamically rendered from map or is there a way to do it, in which case how is it done?

My code so far is as below, it may not be the best setup for what i am trying to do:

Can anyone help??

This is the reference to the component in the parent with the props passed down:

<SowType
            title={"SOW Type"}
            setName={"SOW Type"}
            subtitle={"What type of SOW do you want to generate?"}
            type={"checkbox"}
            controlFunc={this.handleSOWTypeCheckbox}
            options={this.state.sowType}
            selectedOptions={this.state.sowTypeSelectedOption}
          />

This is the child component dynamically rendering the array of items from state:

    class SOWType extends React.Component {
  render() {
    // console.log(this.props);
    return (
      <div className="form-group">
        <label htmlFor={this.props.name} className="form-label">
          {this.props.title}
          <h6>{this.props.subtitle}</h6>
        </label>
        <div className="checkbox-group">
          {this.props.options.map(option => {
            return (
              <label key={option}>
                <input
                  className="form-checkbox"
                  name={this.props.setName}
                  onChange={this.props.controlFunc}
                  value={option}
                  checked={this.props.selectedOptions.indexOf(option) > -1}
                  type={this.props.type}
                />
                {option}
              </label>
            );
          })}
        </div>
      </div>
    );
  }
}

This is the method i am currently using in the parent when a checkbox is clicked in the child component (this basically takes the selected option from the array in state and puts the checked options into another array in state called 'sowTypeSelectedOption: [ ]',

handleSOWTypeCheckbox(e) {
    const newSelection = e.target.value;
    let newSelectionArray;

    if (this.state.sowTypeSelectedOption.indexOf(newSelection) > -1) {
      newSelectionArray = this.state.sowTypeSelectedOption.filter(
        item => item !== newSelection
      );
    } else {
      newSelectionArray = [...this.state.sowTypeSelectedOption, newSelection];
    }
    this.setState(
      {
        sowTypeSelectedOption: newSelectionArray
      } /*() =>
      console.log("sow Type Selection: ", this.state.sowTypeSelectedOption) */
    );
  }