Two checkboxes checked on one click in React JS

I have one component (Fuel) which I use in two other components (Search and SmallFilters) :

Search component is as follows :

class search extends React.Component {
    render() {
        const language = this.props.language.default.portal;

        return (
            <div>
                <div className="searchTitle"><FontAwesome name="search" className="portalFaIcon"/>  {language.search}</div>
                <Fuel language={language} actionFilters={this.props.actionFilters} filters={this.props.filters}/>
            </div>
        );
    }
}

function mapStateToProps(state, ownProps){
    return {
        favorites: state.favorites,
        filters: state.filters,
        carsToShow: state.carsToShow
    };
}

function mapDispatchToProps(dispatch){
    return {
        actionFilters: bindActionCreators(filterActions, dispatch),
        actionCarsToShow: bindActionCreators(actionCarsToShow, dispatch)
    };
}

export default connect(mapStateToProps, mapDispatchToProps)(search);

The SmallFilters is as follows :

render(){
    return (
        <div className="filters noPadding col-xl-8 col-lg-6 col-md-6 col-sm-5 col-xs-12">
            <ReactCSSTransitionGroup transitionName="example" transitionAppear={true} transitionAppearTimeout={500} transitionEnterTimeout={500} transitionLeaveTimeout={500}>
                <Fuel recap={true} title={_.startCase(_.toLower(filter_names.fuel))} {...this.props}/>
            </ReactCSSTransitionGroup>
        </div>
    );
}

The Fuel component is as follows :

import React from 'react';
import FontAwesome from 'react-fontawesome';
import {Link} from 'react-router';
import { filter_names } from './filterActions';

export default class fuel extends React.Component {
    constructor(props){
        super(props);

        this.state = this.getFilterValues()
    }

    emptyValues(){
        return {
            checkboxDiesel: false,
            checkboxBenzine: false
        }
    }

    handleFilter(){
        if(this.state.checkboxDiesel || this.state.checkboxBenzine){
            this.props.actionFilters.addFuelFilter(this.state);
        }else{
            this.props.actionFilters.removeFuelFilter();
        }
    }

    handleDiesel(event){
        const checkbox = event.target.checked;
        this.setState({checkboxDiesel: checkbox, checkboxBenzine: this.state.checkboxBenzine}, () => this.handleFilter());
    }

    handleBenzine(event){
        const checkbox = event.target.checked;
        this.setState({checkboxBenzine: checkbox, checkboxDiesel: this.state.checkboxDiesel}, () => this.handleFilter());
    }

    deActivate(event) {
        event.preventDefault();
        this.setState(this.emptyValues(), () => this.handleFilter());
    }

    getFilterValues(){
        debugger;
        if(!this.props.filters.some(i => i.name === filter_names.fuel)){
            return this.emptyValues();
        }

        return {
            checkboxDiesel: this.props.filters.filter(f => f.name === filter_names.fuel).map(i => i.values.map(v => v.checkboxDiesel)),
            checkboxBenzine: this.props.filters.filter(f => f.name === filter_names.fuel).map(i => i.values.map(v => v.checkboxBenzine))
        };

        /*let values = {};
        this.props.filters.filter(f => {
            if(f.name == filter_names.fuel){
                values.checkboxDiesel = f.values[0].checkboxDiesel;
                values.checkboxBenzine = f.values[0].checkboxBenzine;
            }
        });
        return values;*/
    }

    renderSmall() {
        let diesel = this.getFilterValues().checkboxDiesel ? "Diesel" : "";
        let benzine = this.getFilterValues().checkboxBenzine ? "Benzine" : "";
        return (
            <div className="filter">
                {this.props.title} <Link to="" onClick={this.deActivate.bind(this)}><FontAwesome name="times" className="portalFaRedIcon"/></Link>
                <div className="filterValues">{diesel} {benzine}</div>
            </div>
        );
    }

    render() {
        const language = this.props.language;

        if(this.props.recap) return this.renderSmall();
        console.log(this.props.filters);

        return (
            <div>
                <div className="priceTitle" style=>{language.fuel}</div>
                <div className="transmissionValues">
                    <input type="checkbox" onChange={this.handleDiesel.bind(this)} checked={this.getFilterValues().checkboxDiesel}/> <span>Diesel</span>
                </div>
                <div className="transmissionValues">
                    <input type="checkbox" onChange={this.handleBenzine.bind(this)} checked={this.getFilterValues().checkboxBenzine}/> <span>Benzine</span>
                </div>
            </div>
        );
    }
}

The problem is, when I click on one of those checkboxes, both are checked. And If I click on the same checkbox both are unchecked. But if I click on the other one nothing happends.

This.props.filters comes from redux store and it's something like this if one of those checkboxes is checked :

[{name: "FUEL", values: [{checkboxDiesel: true, checkboxBenzine: false}]}]

Any advice?