Название компонента Checkbox для Material-ui работает неправильно

Question

Атрибут 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.handleChange}
                                     title={'test test'}  onChange={this.handleChange}   />
        </div>
    </>;
}

Вот пример