I need to sort a react-table based on different values depending on the column header that is clicked. So far this is my code:

{
    sortMethod: (a: ListItem, b: ListItem) => {
      console.log(a, b);
      return 1;
    },
    Header: (rest) => {
      console.log(rest);
      return (
        <Flex height={16} width="100%" justifyContent="center">
          <Text onClick={() => rest.column.sortMethod()} color="black">Name</Text>
        </Flex>
      );
    },
    accessor: 'product.name',
    minWidth: 280,
  },

This being my table:

<Table
      key={`table.${products.length}.${selectedKeys.join('.')}`}
      isSelectable
      showPagination={showPagination}
      defaultPageSize={defaultPageSize}
      pageSizeOptions={pageSizes}
      onSelectionChange={(newSelectedProducts: ListItem[]) => {
        if (tableProductsWithTags.length > 0) {
          setSelectedProducts(newSelectedProducts.filter(Boolean));
        }
      }}
      noDataText={isLoading ? 'Loading ...' : 'No products'}
      columns={projectColumns}
      selectedKeys={selectedKeys}
      keyField="id"
      defaultSorted={sortingOptions}
      data={tableProductsWithTags}
      getTrProps={() => {
        return { style: { alignItems: 'start' }, passthrought: { onClick: setFilterOption } };
      }}
      getTdProps={
        ((_state, _rowInfo, column: { id: string }) => {
          const tdProps: { [key: string]: any } = {
            style: { minHeight: 55 }
          };
          if (column.id === 'tags') {
            tdProps.passthrough = { onEdit: handleEditProduct };
          }
          return tdProps;
        }) as ComponentPropsGetterRC
      }
      {...props}
    />

Passing a sort into the sortMethod prop seems like the correct way but how do I actually implement this? In the table you can see I pass in an onEdit method that handles when a cell is edited. I tried this way for a header as well but it seems like it does not have access to the same props.