React Toolbox: Checkbox state not updating

Question

So I have a simple Checkbox component from the react toolbox library, when I click it, I can see the checkbox going from checked to unchecked, but in the console I see these errors everytime I click it:

Uncaught Error: findComponentRoot(..., .0.0.1.1.1:$ripple1.0): Unable to find element. This probably means the DOM was unexpectedly mutated (e.g., by the browser), usually due to forgetting a when using tables, nesting tags like ,

, or , or using non-SVG elements in an parent. Try inspecting the child nodes of the element with React ID ``. invariant.js:39

My component:

import React from "react";
import { Link } from "react-router";
import { ButtonToolbar, Button } from 'react-bootstrap';
import Checkbox from 'react-toolbox/lib/checkbox';

export default React.createClass({
  getInitialState: function() {
    return {
      consent: false
    };
  },
  handleChange: function(field, value) {
    console.log(this.state);
    console.log(field, value);
    this.setState({ [field]: value });
  },
  render() {
    return (
      <div>
        <h2>Just testing</h2>
        <Checkbox type='checkbox' name='consent' label="I have read and agree to the terms & conditions listed in the PDF in step 2." onChange={this.handleChange.bind(this, 'consent')} checked={this.state.consent} />
      </div>
    );
  }
});

In my console, I can see that the handleChange function is working:
Object {consent: false} page.js:14
consent true

When I used React Inspector in Chrome to inspect the CheckBox component, I noticed two weird things:

• the checked property is NOT changing in the parent component (CheckBox) when I click the checkbox.
• the checked property IS changing in the input element inside this CheckBox component.
• the state object IS changing (again according to my first point, the CheckBox component is not obeying checked={this.state.consent}!)

For some reason this.setState is NOT working on the component. Any insight would be appreciated!