Creating Custom MUI Checkbox Component to work with FormControlLabel

I have created a custom checkbox component that wraps a Material UI checkbox.

export default function PublishCheckbox({record}) {
const {publishData} = record;
const {categoryNameForId} = useStoreState(state => (state.document))
const togglePublishDocument = useStoreActions(actions => actions.document.togglePublishDocument);

const handleClick = (event) => {
    event.stopPropagation();
    togglePublishDocument({publishData});
}

return (
    <Checkbox disabled={source === 'PP'} checked={published} color="primary"
              onClick={handleClick} size="medium"/>
)
};

PublishCheckbox.propTypes = {
    record: PropTypes.object.isRequired,
}

It works fine for most of my cases, except where I try use a FormControlLabel component with it.

<FormControlLabel className={classes.publishButton} label="Publish" control={<PublishCheckbox record={file}/>}/>

What happens is that clicking the checkbox calls the onClick action of my custom component twice. Clicking on just the label calls it just once as you would expect. I think this is because the FormConrolLabel is specifically designed to work with MUI checkboxes (and radios and switches), but my custom component is not exposing and using the props and refs the same way so some of that Material UI magic is getting lost.

How can I change my custom checkbox to work with FormControlLabel and stop calling my onClick event twice?