onChange on checkbox doesn't fire in react

Ok before deciding to publish this question I searched a lot and tried lots of things so here is the case I have

<div className="btn-group" data-toggle="buttons">
 <label htmlFor="test" className="btn win-checkbox-btn" onClick={e => e.stopPropagation()}>
  <input id="test" autoComplete="off" className="taggable" type="checkbox" name="test" onChange={(e) => { console.log(e) }} />
 someText
 </label>
 <input autoComplete="off" className="taggable" type="checkbox" name="test2" onChange={(e) => { console.log(e) }} />
</div>

So what happens here is that the onChange function on the first checkbox (the one inside the label with the name of test) doesn't fire at all, but the onChange function on the second checkbox (test2) fire normally. I need it inside the label because i'm using Bootstrap checkbox buttons . so Im using bootstrap 3.3.7 and react 15.6.0 . More info is that using the htmlFor attribute on the label or removing it doesn't affect anything, and the onClick handler that I'm using on the label was in a solution I found while i was searching but also didn't help at all and removing it or adding it doesn't affect anything.

Any clue here would really help much, thanks in advance.