I’m having a hard time figuring out how to print the updated reference of a rendered component on my site using react-to-print package. What I’m trying to achieve is to print a component table without an action column.

Here’s the snippet of the code:
When I press the button which changes the state of the rowAction, it should also change the enableRowAction attribute in the table, but it doesn’t, when i log it in console, the state is correctly showed as false or true depending on the current state. But when i print the reference, it is still the same reference as at the initial load of the component.

  const componentRef = useRef(null);
  const theme = useMantineTheme();

  console.log(rowActions);
  console.log(componentRef);

  const [sorting, setSorting] = useState<MRT_SortingState>([]);
  const [rowActions, setRowActions] = useState<boolean>(enableRowActions);
  const triggerButton = () => {
    return (
      <UnstyledButton
        sx={{
          '&:hover': {
            backgroundColor: theme.colors.scleraLight,
          },
        }}
      >
        <ThemeIcon sx={{ color: theme.black, width: '54px', height: '54px' }}>
          <i style={{ fontSize: 40 }} className="ti ti-file-type-pdf" />
        </ThemeIcon>
      </UnstyledButton>
    );
  };
  return (
    <Box my="xl">
      <Button onClick={() => setRowActions(!rowActions)}>change state</Button>
      <Box style={{ textAlign: 'right' }}>
        <ReactToPrint
          content={() => componentRef.current}
          documentTitle="test"
          trigger={() => triggerButton()}
          // onBeforePrint={handleBeforePrint}
          // onAfterPrint={handleAfterPrint}
        />
      </Box>

      {showResultsCount && (
        <Text weight="bold" align="right" mb="xl">
          {t('patient.search.results.count', { count: data.length })}
        </Text>
      )}
      <Box ref={componentRef}>
        <MantineReactTable
          columns={columns}
          data={data}
          rowCount={rowCount}
          mantineTableHeadCellProps={{
            sx: {
              '& .mantine-TableHeadCell-Content': {
                justifyContent: 'space-between',
              },
            },
          }}
          mantineTableBodyRowProps={mantineTableBodyRowProps}
          enableRowActions={rowActions}
          renderRowActions={renderRowActions}
          enableGlobalFilter={enableGlobalFilter}
          positionActionsColumn={positionActionsColumn}
          manualPagination={manualPagination}
          manualSorting={manualSorting}
          onPaginationChange={onPaginationChange}
          onSortingChange={setSorting}
          enableFilters={enableFilters}
          enableFullScreenToggle={enableFullScreenToggle}
          onColumnVisibilityChange={onColumnVisibilityChange}
          state={{
            ...state,
            sorting,
          }}
          initialState={{
            columnPinning: {
              right: ['mrt-row-actions'],
            },
          }}
        />
      </Box>
    </Box>
  );

I was playing with this but no luck. I’m very close to just creating a separate print template with the jsx, where it will have the display: none variable. But I think it’s quite inefficient to always load 2 practically same components all the time. I would be happy if you come up with any other ideas.