Make entire cell contents clickable MUI table - reactjs

Question

I've got a MUI table with cells that link to another part of the app when clicked. Rather than wrap the entire row, I'm selectively wrapping certain cells. The link/routing is working - but I'm left with this annoying dead unclickable space due to some styling interactions.
In the picture below I've opened the 'inspect element' view on dev tools to show specifically the dead zone I'm dealing with in the first cell, and to show some mui styling details that might be relevant. Code with styles included further down.
Styles:
const useStyles = makeStyles(theme => ({
table: {
minWidth: 650,
position: 'relative',
fontSize: 10
},
largeIcon: {
width: 60,
height: 60
},
tableContainer: {
minHeight: 320
},
tableBodyContainer: {
minHeight: 265
},
tableHeadRow: {
'& .MuiTableCell-root': {
borderRight: `1px solid ${COLORS.WHITE}`,
borderBottom: `none`,
padding: '8px 5px 8px',
fontSize: 10,
cursor: 'pointer'
}
},
arrow: {
color: theme.palette.grey[500]
},
arrowActive: {
transform: 'rotate(-180deg)',
color: theme.palette.primary.main,
display: 'inline-block'
},
tableRow: {
'& .MuiTableCell-root': {
borderRight: `1px solid ${theme.palette.grey[200]}`,
borderBottom: 'none',
cursor: 'pointer',
padding: 5,
paddingTop: 8,
paddingBottom: 8,
minWidth: 25
},
'& .MuiTableCell-root:first-child': {
border: 'none'
}
},
selectedRow: {
backgroundColor: `${COLORS.SECONDARY} !important`,
'& .MuiTableCell-root': {
color: COLORS.WHITE
}
},
editIcon: {
backgroundImage: `url(${EditIcon})`,
backgroundSize: 'cover',
backgroundPosition: 'center',
width: 18,
height: 18
}
}));
And the table:
return (
<div className={classes.tableContainer}>
<TableContainer className={classes.tableBodyContainer}>
<Table className={classes.table} size="small">
<TableHead>
<TableRow className={classes.tableHeadRow}>
<TableCell />
{tableHeadElements.map(e => (
<TableCell key={e.key} align="center">
{e.label}
</TableCell>
))}
</TableRow>
</TableHead>
<TableBody>
{folders?.items.map((folder: IFolderDTO, index: number) => {
const { id, name, updatedAt } = folder;
return (
<TableRow
className={classes.tableRow}
classes={{ selected: classes.selectedRow }}
selected={selectedRow === id}
onClick={() => setSelectedRow(id)}
key={index}
>
<TableCell align="center" >
<Link to={APP_DASHBOARD_CHILD_FOLDER_CONTENTS_PATH(id)}>
<Box>
<IconButton color="default" size={'medium'}>
<FolderIcon fontSize="default" />
</IconButton>
</Box>
</Link>
</TableCell>
{[name, new Date(updatedAt)].map(cell => (
<TableCell key={index} align="center">
<Link to={APP_DASHBOARD_CHILD_FOLDER_CONTENTS_PATH(id)}>
<Box>{getCorrectFormat(cell)}</Box>
</Link>
</TableCell>
))}
<FolderActionsMenu
folderId={id}
onDeleteFolder={onDeleteFolder}
openDialogWithId={openDialogWithId}
/>
</TableRow>
);
})}
</TableBody>
</Table>
</TableContainer>
<FolderFormDialog />
</div>
Kill the dead unclickable space! (please)
Thanks