Mi tabla se ve así:

 <TableContainer component={Paper} style={{height: "40vh", width: "90vh"}}> <Table size="small" sx={{ minWidth: 200 }}> <TableHead> <TableRow> <TableCell align="center" width="90"></TableCell> {consequences_description.map((description) => ( <TableCell align="center" width="90">{description}</TableCell> ) )} </TableRow> </TableHead> <TableBody> {risk_matrix.map((row, row_index) => ( <TableRow key={row_index} sx={{ '&:last-child td, &:last-child th': { border: 0 } }} > <TableCell component="th" scope="row"> {likelyhood_description[row_index]} </TableCell> {row.map( (column, column_index) => ( <TableCell align="center"> <ToggleButton risk={column} row_index={row_index} column_index={column_index} /> </TableCell> ))} </TableRow> ))} </TableBody> </Table> </TableContainer>

El botón dentro de la tabla se llama <ToggleButton/> y se ve así:

 <ThemeProvider theme={filtersTheme}> <Button variant="contained" color={handleColor()} onClick={console.log("Clicked")} >{risk}</Button> </ThemeProvider>

Tan pronto como se muestra la tabla, la consola muestra "Hacer clic", lo que significa que se llama a la función onClick para el botón tan pronto como se muestra dentro de la tabla por algún motivo, pero no puedo hacer clic y activar la función onClick. ¿Hay alguna forma de hacer esto?