Can't see attached event function but noop

The problem is that although I have attached events (e.g. handleClear) in the class below, however, when I check the onClick event in the button dom, it shows an empty method noop() {} instead. As a result, it can't clear as expected.

The strange thing is that sometimes if I set breakpoints, the handler method would be there. I suspect the event attachment is related to the timing. But I can't identify when and where it misses to attach the event function. Could anyone provide some tips on resolving this? Or provide some insights?

class ClearHistory extends PureComponent {

    handleCancel = () => {
        console.log('handleCancel');
    }

    handleClear = (event) => {
        console.log('handleClear');
    }

    render() {

        return (
            <div>
                <Button key='cancel' type='button' onClick={this.handleCancel} >
                    Cancel
                </Button>
                <Button key='remove' type='button' onClick={this.handleClear} >
                    Clear
                </Button>
            </div>
        );
    }
}