How to put Link from react router dom inside Material UI table - reactjs

Question

Like the title says I need to put Link inside the table from Material UI, but i get these two errors <td> cannot appear as a child of <a> <a> cannot appear as a child of <tr>. Now obviously I know what these two error messages mean, but I need to put Link as let's say container around cells, because I need to be able to click anywhere inside the row for redirection to another page.
Here is my code:
<TableRow key={index}>
<Link
to={`/edit/${apiData.id}/${apiData.name}/${apiData.email}`}
>
<TableCell align="left" style={{ paddingLeft: 40 }}>
{apiData.name}
</TableCell>
<TableCell align="left">{apiData.email}</TableCell>
<TableCell align="left">{apiData.status}</TableCell>
<TableCell align="left">{roles}</TableCell>
</Link>
<TableCell align="right" style={{ paddingRight: 40 }}>
<RoleButton onClick={handleRoleChange}>
{roles === "Admin" ? "Set as User" : "Set as Admin"}
</RoleButton>
</TableCell>
</TableRow>
Anyone know how to fix this, if You do I would greatly appreciate that

Answer 1

You can use onClick in TableRow.
function HomeButton() {
let history = useHistory();
function onRowClick(name) {
history.push(`/user/${name}`);
}
return (
<Table>
<TableHead>
<TableRow>
<TableCell>Name</TableCell>
<TableCell>Age</TableCell>
</TableRow>
</TableHead>
<TableBody>
<TableRow onClick={() => onRowClick('tom')}>
<TableCell>Tom</TableCell>
<TableCell>26</TableCell>
</TableRow>
</TableBody>
</Table>
);
}