Checkbox management in React

I'm struggling with a problem that I cannot overcome. I have a user object that has array of role objects in it. What I want to achieve is to add/remove specific role from the roles array when clicking on specific checkbox ('ROLE_USER' or 'ROLE_ADMIN'). I'm trying to solve this problem all day, and I give up.

This is my code:

const rolesArray = [
    {
        id: 1,
        name: "ROLE_USER"
    },
    {
        id: 2,
        name: "ROLE_ADMIN"
    }
]

class UserDataTable extends Component {

    state = {
        roles: this.props.user.roles
    };

    handleRoleChange = (e) => {
        // Dunno know why, but role always returns -1 as if the object did not exist in the array, but it does
        let role = rolesArray.find(role => role.name === e.target.name);
        if (e.target.checked) {
            console.log("ADDING ROLE");
            this.setState({
                roles: this.state.roles.concat(role)
            })
        } else {
            console.log("REMOVING ROLE");
            let index = this.state.roles.indexOf(role);
            this.setState({
                roles: this.state.roles.splice(index, 1)
            })
        }
        console.log(this.state.roles);
    };

    roleCheckboxes = () => {
        return (
            <>
                <FormGroup check>
                    <Label check>
                        <input onChange={(e) => this.handleRoleChange(e)}
                               value={rolesArray[0]}
                               name="ROLE_USER"
                               // I tried to achieve this by calling some() / filter() / find() / includes() method (none of them worked?)
                               // that returns true if it found something, like 
                               // 'this.state.roles.some(role => role.id === 1)'
                               // so if I remove role object from array, the checkbox will be unchecked and conversely
                               defaultChecked={() => console.log("I have no idea how to check if user has role or not")} type="checkbox"/>
                        <span className="form-check-sign"/>
                        USER
                    </Label>
                </FormGroup>
                <FormGroup check>
                    <Label check>
                        <input onChange={(e) => this.handleRoleChange(e)}
                               value={rolesArray[1]}
                               name="ROLE_ADMIN"
                               defaultChecked={() => console.log("I have no idea how to check if user has role or not")} type="checkbox"/>
                        <span className="form-check-sign"/>
                        ADMIN
                    </Label>
                </FormGroup>
            </>
        )
    }
}

Is there any way to overcome this problem? I'm getting sick of checkboxes and form validation, not gonna lie.

I'm using Reactstrap btw.

Thanks in advance.