Tanstack table headerprops not accessible anymore

Question

I am currently working with tanstack table and material-ui and I am currently working on a custom filter where when the user clicks the header for a table a popover will appear, right now I am trying to anchor the popover to the <TableCell> I've been looking for a solution and I've found that people are using the gettheaderprops https://github.com/TanStack/table/issues/499 however as of writing this property did exist in tanstack table v7 but not on the current one anymore. Is there a way to get the header props at the table level so I can attach my clickevent and handle my popover rendering?

The code is a whole lot more long but here's a simplified version of my implementation

Column definition:

    const columns = useMemo(()=>{
    [
    
     ...
      accessorKey: 'dateTime'
      header: 'DATE AND TIME'
      meta: {
         customFilterComponent, //POPOVER COMPONENT
         customClickEvent
      }
    
        ...
    ]

},[fetchedData])

table implementation:

<TableContainer sx={{ overflowX: 'hidden' }}>
          <MUITable
            sx={{
              minWidth: 750,
              background: theme.colors.component.table.background,
              color: theme.colors.component.table.color,
            }}
            aria-labelledby="tableTitle"
            size={'medium'}
          >
            <TableHead
              sx={{
                display: `${loading ? 'none' : 'table-row-group'}`,
              }}
            >
              {table.getHeaderGroups().map((headerGroup) => (
                <MuiTableRow key={headerGroup.id}>


                  {headerGroup.headers.map((header) => {
                     //GET TABLEHEADER PROPS HERE TO SO I CAN ATTACH CLICK EVENT TO TABLE CELL AND RENDER CUSTOM COMPONENT



                    return (
                      <TableCell
                        key={header.id}
                        variant="head"
                        style={{
                          width: header.getSize() ?? 150,
                        }}
                        sx={{
                          cursor: header.column.getCanSort() ? 'pointer' : '',
                        }}
                        onClick={header.column.getToggleSortingHandler()}
                      >
                        {flexRender(
                          header.column.columnDef.header,
                          header.getContext()
                        )}

                       
                      </TableCell>
                    );
                  })}
                </MuiTableRow>
              ))}
            </TableHead>

          ...

        </TableContainer>