Override Anchor Tag with Checkbox In React

I'm making a sidebar and am currently using this as a reference. Right now, I'm required to add a checkbox to each item. I'm able to add a checkbox like so:

<a href="#TestSub" className="list-group-item" data-toggle="collapse" data-parent="#TestSub" onClick={this.TestSub}>
    <input type="checkbox" checked={this.state.TestSub}/> 
    Main Sub 
    <i className="fa fa-caret-down"></i>
</a>

However, my problem comes with items that have nested hrefs. While the column toggles to show what's nested in it, I have no way to click the checkbox. Is there a fix to this?