I'm using Material UI Datagrid to display some data. One of the columns displays a link that opens the URL in another tab. On the clicked row I want to navigate to another page, but when the link is clicked I don't want to navigate to another page.

I could simply disable the link's click behavior on the entire cell, but that's not entirely ideal. Do you know of a solution that would somehow prevent onClick from being executed within a link's onRowClicked ?

Simplified example I'm using:

<DataGrid 
    columns={[
        { flex: 200, field: 'name', headerName: 'Naam' },
        {
            flex: 250,
            field: 'url',
            headerName: 'Link',
            renderCell: (cell: GridCellParams) => (
                <Box width="100%" overflow="scroll">
                    <Link
                        href={cell.value}
                        target="_blank"
                    >
                        Click here
                    </Link>
                </Box>
            ),
        },
    ]}
    onRowClicked={(row) => {
        navigate(Routes.OTHER_PAGE.replace(':id', row.id))
    }}
    rows={rows}
/>