My checkboxes are not ticking / unchecking

I'm implementing some checkbox with React, I can set it to initially be checked or not, but I can not change that state.

How to solve?

My PrincipaL Class

class NewsletterConfig extends Component {
constructor(props) {
    super(props)
    this.state = {
        promocoes: true,
    }

    this.handleClick = this.handleClick.bind(this)
}

handleClick({ target }) {
    this.setState({
        [target.name]: !target.checked,
    })
}

render() {
    return (
        <div>
            <Componente01
                name="promocoes"
                title="Tab"
                checked={this.state.promocoes}
                handleClick={this.handleClick}
            />

The Component01

const NewsletterCalling = ({
title,
name,
checked,
 }) => (
<div>
    <label htmlFor={name}>{title}</label>
    <Checkbox name={name} checked={checked} />
</div>
)

NewsletterCalling.propTypes = {
title: string.isRequired,
name: string.isRequired,
checked: bool.isRequired,
handleClick: func.isRequired,
}

And the Checkbox

const Checkbox = ({ name, checked, handleClick }) => (
<div>
    <input
        id={name}
        name={name}
        checked={checked}
        type="checkbox"
        onClick={handleClick}
    />
    <span />
</div>
)

Checkbox.propTypes = {
    name: string.isRequired,
    checked: bool.isRequired,
    handleClick: func.isRequired,
}