How to replace the checkbox from the UI Fabric DetailsList component

How can I replace the circle checkbox of a DetailsList in office-ui-fabric-react with a normal square CheckBox component? I see onRenderCheckbox so I try something like this:

onRenderCheckbox={(props) => (<Checkbox checked={props.checked} />)}

or

onRenderCheckbox={(props) => (<Checkbox {...props} />)}

I can see the square checkbox but I can't select it. What it the proper way to do this?

Thanks in advance...

When you render the Checkbox component, it handles the click itself (and thus it won't percolate up to the row so it can toggle selection accordingly), so you need to prevent it with the pointer-events: none style.

onRenderCheckbox(props) {
    return (
        <div style={{ pointerEvents: 'none' }}>
            <Checkbox checked={props.checked} />
        </div>
    );
}

Check it out here: https://codepen.io/anon/pen/zQXEPr