проблема с версткой в таблицу react mui

есть такой код

<Table aria-label="jobs pagination table">
  <TableHead>
    <TableRow>
      {tableTitles.map((title, idx) => (
        <TableCellTitleStyled key={idx}>
          <TitlesStyled title={title}>{title}</TitlesStyled>
        </TableCellTitleStyled>
      ))}
    </TableRow>
  </TableHead>
  <JobsDataMapping
    jobsData={jobsData}
    apiFetcher={apiFetcher}
    instruments={instruments}
  />
</Table>


const JobsDataMapping = ({ jobsData, apiFetcher, instruments }) => (
  <TableBody>
    {jobsData?.jobs?.map(row => {
      const src = instruments?.find(i => i?.configName === row?.tool)?.icon;
      return (
        <Link
          key={row.job_id}
          passHref
          href={`${window.location.origin}/job/${row.job_id}`}
        >
          <a>
            <StyledTableRow>
              <TableCell padding="none" width="530px">
                <Box marginTop="16px" marginLeft="24px">
                  <Box display="flex">
                    {src && (
                      <Image
                        width={24}
                        height={24}
                        src={src}
                        alt="toolInfoIcon"
                      />
                    )}
                    <Typography
                      typography="subtitle1"
                      color="text.primary"
                      ml="16px"
                    >
                      {configToVisible.get(row.tool)}
                    </Typography>
                  </Box>
                  <DescriptionStyled typography="Caption">
                    {row.description}
                  </DescriptionStyled>
                </Box>
              </TableCell>
              <TableCell>
                <Box color="text.primary">
                  <Typography typography="body2">
                    {format(Number(row.created_at), 'dd MMMM yyyy', {
                      locale: ru,
                    })}
                  </Typography>
                  <Typography typography="body2">
                    {format(Number(row.created_at), 'HH:mm')}
                  </Typography>
                </Box>
              </TableCell>
              <TableCell>
                <Typography
                  typography="subtitle1"
                  marginLeft="-8px"
                  color={getColor(row.status)}
                >
                  <Status status={row.status} errors={row.errors?.errors} />
                </Typography>
              </TableCell>
              <TableCell>
                <LinkStyled typography="caption">
                  <a onClick={e => e.stopPropagation()} href="#">
                    {row.username}
                  </a>
                </LinkStyled>
              </TableCell>
              <TableCellIconsStyled>
                <DownloadButton apiFetcher={apiFetcher} item={row} />
                <CopyToClipboardButton job_id={row.job_id} />
              </TableCellIconsStyled>
            </StyledTableRow>
          </a>
        </Link>
      );
    })}
  </TableBody>
);

export default JobsDataMapping;

суть в чем, у меня есть хедер таблицы и бади часть, бади - это компонент JobsDataMapping обернут в Link, import Link from 'next/link'; такие ссылки открывают только в этой же вкладке, я мне нужно чтобы они открывались по command в новой вкладке, для этого я в Link добавляю тег вот здесь

  <Link
      key={row.job_id}
      passHref
      href={`${window.location.origin}/job/${row.job_id}`}
    >
      <a>
        <StyledTableRow>

ссылка открывается хорошо, но верстка сильно съезжает, раньше каждый row был на все ширину таблицы, а сейчас row становится на ширину первого столбца и никакие width: 100% и что-то подобное не помогает, кст я заметил, что если убрать TableHead, то ситуация выправляется, что с этим делать хз, может кто подскажет, мне нужно чтобы при нажатии на row, а это ссылка она открывалась в новой вкладке и для этого я добавил тег а, но из-за этого поехала верстка(