Заголовок компонента Checkbox в Material-ui работает некорректно

Атрибут title не работает правильно для флажка, когда мышь находится в области вокруг флажка, он работает, но не работает, когда мышь находится на элементе ввода.

Это мой код флажка:

const StyledCheckbox = withStyles({
colorPrimary: {
    borderColor: '#757575',
    borderRadius: 1,
    '&$checked': {
        color: '#00adb3'
    },
},
checked: {},})(Checkbox);

и рендер

 public render() {
    return <>
        <div className='checkbox-react'>
            <StyledCheckbox  color='primary' checked = {this.state.checked} onClick = {this.handleChangeEvent}
                                     title = {'test test'}  onChange = {this.handleChangeEvent}   />
        </div>
    </>;
}

Вот пример