How to costumize sorting icon in header

[AllanSmithee83]

I'm trying to customize the Sorting icon.
Can You please advise any hints?

My code

 const columns = useProductColumns();
                  
    const tableInstance = useTable(
            {
              columns,
              data: rows,
              manualPagination: true,
               manualSortBy: true
              pageCount: totalPages,
            },
            useSortBy
            usePagination,
            useRowSelect,
          );
    
        <Table
                  hasBorder
                  leadingPadding="12px"
                  isLoading={isLoading}
                  tableInstance={tableInstance}
                  noResultsText={props.emptyTableText}
                />

useProductColumn return array

[{
             
                Header: "<SortWrapper>
                    <IconUp style={{color: isSortedUp ? "red" : "black"}}/> 
                    <IconDown style={{color: isSortedDown ? "red" : "black"}}/>
                  </SortWrapper>",        
                accessor: ({product :{name}) => name         
                id: "Name"
            }, {
                Header: "Status",        
                accessor: ({product :{status}) => status       
                id: "Status"
                onClick: {how pass ID to useTable} 
            }, {
                 Header: "Category",        
                accessor: ({product :{category}) => category      
                id: "Category"
            }}];