Как настроить ссылку на styled компонент TableRow в material ui
У меня есть styled компонент TableRow из mui
const StyledTableRow = styled(TableRow)(({ theme }) => ({
color: theme.palette.text.secondary,
'&:hover': {
background: theme.palette.action.hover,
cursor: 'pointer',
},
}));
Так же внизу я отрендериваю этот компонент, то есть беру массив данных и рендерю каждый элемент массива как строку в таблице
{data?.map(row => (
<StyledTableRow key={row.job_id}>
<TableCell>
<Box
sx={{
display: 'flex',
maxWidth: '300',
}}
>
<Image
width={24}
height={24}
src={
instruments.find(el => el.configName === row.tool)?.icon
}
alt="toolInfoIcon"
/>
<Box sx={{ ml: 1 }} className={styles.toolName}>
{
comparisonNames().find(el => el.CONFIG_NAME === row.tool)
?.visibleName
}
</Box>
</Box>
<Box sx={{ mt: 1 }} className={styles.decription}>
{row.description}
</Box>
</TableCell>
<TableCell>
<Tooltip
title={intl.get('DOWNLOAD_RESULT')}
placement="top-end"
>
<Button
sx={{ color: 'action.active' }}
onClick={e => {
e.preventDefault();
download(row);
}}
>
<DownloadIcon />
</Button>
</Tooltip>
<Tooltip title={intl.get('COPY_LINK')} placement="top-end">
<CopyToClipboardButton job_id={row.job_id} />
</Tooltip>
</TableCell>
</StyledTableRow>
))}
Теперь вопрос: мне нужно чтобы по клику на строку меня редайректило на другую страницу, то есть мне нужен либо href либо Link to.. либо что-то еще, я бы мог наверное указать у <TableRow component={Link} to='https://....' но мне нужен имеено StyledTableRow, можно ли как-нибудь к нему прицепить хотя бы какой-нибудь router.push(...) это я кст тоже пробовал типо вот так
<StyledTableRow onClick={router.push('')} key={row.job_id}>
но onClick подчеркивается красный с такой ошибкой "Type 'Promise' is not assignable to type 'MouseEventHandler'" и почему-то onClick срабатывает сразу при заходе на страницу, а не после клика по строке