How to remove background when click on material-table action buttons - material-ui

Question

I want to remove this background grey color when switching on or off in Material-Table.
Here is my table code.
Here is the code for material-table.When I inspect the code I see a button as a parent element of this Switch element. I am pretty sure this is due to that button element. I added a styling to remove the hover color and It's working fine but for this click event I am unable to change it.
here is the code for removing hover styling:
rootTable: {
"& .MuiIconButton-root": {
backgroundColor:'transparent',
},
},
<div className={classes.rootTable}>
<MaterialTable
options={{
paging: false,
addRowPosition: 'first',
search: true,
showTitle: false,
doubleHorizontalScroll: true,
minBodyHeight: '65vh',
maxBodyHeight: '68vh',
actionsColumnIndex: columns.length
}}
style={{ width: '100%' }}
actions={[
//rowData => ({
// icon: (rowData.companyAddress && rowData.companyAddress != null) ? "location_on" : "location_off",
// tooltip: "Update Address",
// onClick: (event, rowData) => dispatch(Actions.setSelectedCompanyData(rowData))
// })
rowData => ({
icon:()=>RenderSwitch(rowData),
tooltip: "Supprimer cet accès Net",
}),
]}
components={{
Toolbar: props => {
const propsCopy = { ...props };
propsCopy.showTitle = false;
return (
<Grid container direction="row" alignItems={"center"}>
<Grid container item xs={3} justify={'flex-end'}>
{t('LBL.NUMBER_OF_LOGINS')+": "+ data.length}
</Grid>
<Grid container item xs={3} justify={'flex-end'}>
{renderPasswordVisibleToggle()}
</Grid>
<Grid item xs={6}>
<MTableToolbar {...propsCopy} />
</Grid>
</Grid>
);
}
}}
isLoading={loading}
localization={{
pagination: {
labelDisplayedRows: `{from}-{to} ${t('TBL.PAGGING.TO')} {count}`,
labelRowsPerPage: t('TBL.PAGGING.LBL')
},
header: {
actions: ['Actions']
},
body: {
emptyDataSourceMessage: t('TBL.EMPTY_RECORDS_MESSAGE'),
addTooltip: t('TBL.ADD'),
editTooltip: t('TBL.EDIT'),
editRow: {
deleteText: 'Voulez-vous supprimer cette ligne?',
cancelTooltip: t('TBL.CANCEL'),
saveTooltip: t('TBL.SAVE')
}
},
toolbar: {
searchTooltip: t('TBL.SEARCH'),
searchPlaceholder: t('TBL.SEARCH')
}
}}
columns={columns.map(column => {
column.title = t(column.translate);
return column;
})}
data={data}
editable={{
onRowAdd: !loggedUser.role.includes("ROLE_SUB_USER") ? (newData) =>
new Promise((resolve, reject) => {
newData.submitted = true;
if (newData.siret.length!==14) {
setNameError({
error: true,
label: "required",
helperText: t('LBL.INVALID_COMPANY_ID') ,
validateInput: true,
});
reject();
newData.submitted = undefined;
return;
}
newData.submitted = undefined;
if (isDevelopmentEnvironment || newData?.societe?.includes('test-qa')){
dispatch(Actions.saveNewLogin(newData,resolve));
}else {
const url = apiConfig.baseUrl + '/api/company-login/check-login-status';
axios
.post(url, newData, { validateStatus: () => true })
.then(response => {
if (response?.data?.validLogin) {
setCreateData(newData);
setTimeout(() => {
resolve();
}, 600);
} else {
dispatch(MessageActions.showMessage({
message: t("LBL.ERROR_MESSAGE"),
variant: 'error'
}));
reject();
}
})
.catch(error => {
console.error(error);
reject();
});
}
}) : null,
onRowUpdate: newData => {
return new Promise(resolve => {
dispatch(Actions.updateCompanyLogin(newData,resolve));
})
}
}}
icons={{
Add: forwardRef((props, ref) => (
<Fab ref={ref} {...props} className={classes.iconButton} aria-label="add">
<AddIcon />
</Fab>
))
}}
/>
</div>