Reactjs: Checkbox state is update, then reverted when callback function terminates

I'm pretty new to react and I ran into a weird issue today. I have a function called handleCheckBoxClick()

handleCheckboxClick : function (e) {
    this.setState({isChecked : e.target.checked},
        function () {
            if (this.state.isChecked) {
                this.props.addToTransactionSubmissions(
                    this.props.submissionGuid, 
                    this.props.paymentInfo
                );
            } else {
                this.props.removeFromTransactionSubmissions(
                    this.props.submissionGuid
                );
            }
        }
    );
}

This particular function calls a function passed down through a parent called addTo/removeFromTransactionSubmission. The code for both is as follows:

addToTransactionSubmissions : function (guid, paymentInfo) {
    if (Object.keys(this.state.transactionSubmissions).length === 0) {
        this.setState({submissionType : paymentInfo.status_description.toLowerCase()},
            function () {
                console.log('it set the state though');
                console.log(this.state.transactionSubmissions);
                this.toggleButtons(this.state.submissionType);
            }
        );
    }
    var newTansactionSubmissions = update(this.state.transactionSubmissions,
        {
            $merge : {[guid] : paymentInfo}
        });
    this.setState({transactionSubmissions : newTansactionSubmissions},
        function () {
            console.log('state is now', this.state.transactionSubmissions);
        }
     );
},
removeFromTransactionSubmissions : function (guid) {
    if (Object.keys(this.state.transactionSubmissions).length === 0) {
        this.setState({submissionType : undefined},
            function () {
                this.toggleButtons(this.state.submissionType);
            }
        );
    }
    var newTransactionSubmission = update(this.state.transactionSubmissions,
        {
            [guid] : {$apply: function (x) {return undefined}}
        });
    this.setState({transactionSubmissions : newTransactionSubmission},
        function () {
            console.log('here in remove Transaction');
        });
}

The problem I run into is that when addTo/removeFromTransactionSubmissions is called, the checkbox does not changes states, even though the state is changed before addTo/removeFromTransactionSubmissions is called. Through further debugging using Firebug, I discovered that 1) the functions are all being called properly, 2) if I do not set state in addTo/removeFromTransactionSubmissions everything runs without a hitch, and 3) the checkbox becomes unchecked after handleCheckboxClick completely finishes.

I suspect that for whatever reason, the state is being lost when Reactjs is trying to update the DOM. However, I do not know why this is the case and don't know how to further debug. And for clarification, the checkbox is in the child component whereas the transactionSubmissions state is in a parent, and on the click of a checkbox, transactionSubmissions is modified (Child Action modifies Parent state). If this is the wrong way to go about the problem, please tell me.

Basically what I want to do is every time I click/unclick a box, it removes the corresponding object to/from a map of ids to the object. Am I doing something incorrectly?

Thanks for the help!