React.js checkbox changes property in state to 'on'

I could use some help understanding what's going on here. I'm learning React, and trying to recreate a component I've built in an existing app in Ember.

Fairly simple case, just have a component that has its own state, and this component includes a checkbox to toggle a property, starChart, on the state. The problem is that though the checkbox gets the right value from state, when I toggle it, it stays checked and changes the state property to the string "on" instead of a boolean.

Here's the checkbox; I followed another tutorial in creating the onChange call and the handler function, so there's probably something wrong here, I just don't know how to tell what it is:

<input name="starChart" 
       type="checkbox" 
       checked={data.starChart} 
       onChange={(e) => this.handleChange(e)}/>

handler function

  handleChange = (e) => {
    const rec = {
      ...this.state.dci,
      [e.target.name]: e.target.value
    };
    this.setState({dci: rec});  
  }

I've had a similar issue with inputs that should be numbers, but it seems an <input> in React always returns some string, and I'm not sure how to coerce it to the type (boolean, integer, etc) that I want.