JQuery doesn't start on first click, but does on second

$(document).ready(function() {
    $('#talents li').on('click',  'div', function(event) {
        event.stopPropagation();

        $(event.target).addClass('--active');
        talents_points = $('.--active').length;
        _this.setState({ points: talents_points });
        this.handlePointsMaxed(talents_points);
    });
    $('.no-right-click').bind('contextmenu', function(event) {
        event.stopPropagation();

        $(event.target).removeClass('--active');
        talents_points = $('.--active').length;
        _this.setState({ points: talents_points });
        // this.handlePointsMaxed(talents_points);

        return false;
    });
});

<ul id="talents">
    <li onClick={this.handlePointsClicks}>
        <div id="talent-stacks" className="talent-image__stacks"></div>
    </li>
</ul>`

      

        
        
        
      

    

Any idea why? I'm sure this works for mouse and click functionality, but I need both for what I'm doing and haven't found any other way to combine them.

EDIT: Added sample HTML for context