Semantic-ui-react: Change handler for semantic-ui-react checkbox does not work : React+Typescript

[vjr12]

I am having two semantic-ui-react checkboxes. When I am trying to attach change handlers, I get a value of 'undefined' when I console log .

Want to fetch both of the checkbox values.

Link to the sandbox: https://codesandbox.io/s/5vo8v4996k

Where am I going wrong?

Help would be appreciated

`````````````````````
import React from "react";

import ReactDOM from "react-dom";

import { Checkbox } from "semantic-ui-react";

import Form from 'semantic-ui-react/dist/commonjs/collections/Form';

export default class App extends React.Component<{},{}> {
constructor(props:any) {
super(props);
this.state = {
cb1: true,
cb2: true
};
}

checkboxChangeHandler = (event: React.FormEvent) => {
let name = event.target.name;
console.log(name); // It is giving undefined here
if (name === "cb1") {
this.setState({ cb1: !this.state.cb1 });
}
if (name === "cb2") {
this.setState({ cb2: !this.state.cb2 });
}
};
render() {
return (

label={"CB1"}
name="cb1"
checked={this.state.cb1}
onChange={this.checkboxChangeHandler}
/>
label={"CB2"}
checked={this.state.cb2}
name="cb2"
onChange={this.checkboxChangeHandler}
/>

);
}
}

[layershifter]

Please use the second param in callback, it contains all required information: https://codesandbox.io/s/31oq13p3o1

[rogerprz]

Please use the second param in callback, it contains all required information: https://codesandbox.io/s/31oq13p3o1

How can we get this.state? Currently I am getting Cannot read property 'state' of undefined
I am using the data callback.