Sort only when sort icon is clicked, not when whole column header is clicked

I would like to have a sort icon in my header, and I would like to activate the sort only when the icon is clicked, not the whole header. As far as I can tell, for sorting, there is no way to move a column header’s onClick() handler from the entire <th> to a child element of the <th>.

[tannerlinsley]

You can move the ...getSortByToggleProps() to whatever element you want to be able to use as the toggle.

[cchintada-chikkolu]

It is working for me as suggested. <thead className="bg-dark text-white"> {headerGroups.map(headerGroup => ( <tr {...headerGroup.getHeaderGroupProps()}> {headerGroup.headers.map(column => ( <th {...column.getHeaderProps()} className="justify-content-top"> {column.canFilter?<span><FaFilter onClick={ () => {column.setFilter('');setFilters({...filters, [${column.id}]: !filters[${column.id}]})}}/></span>:null} <span className="ms-5 me-5">{column.render('Header')}</span> <span> {column.isSorted ? column.isSortedDesc ? <FaSortUp {...column.getSortByToggleProps()} /> : <FaSortDown {...column.getSortByToggleProps()} /> : column.canSort?<FaSort {...column.getSortByToggleProps()} />:''} </span> <div>{column.canFilter && filters[${column.id}]? column.render("Filter") : null}</div> </th> ))} </tr> ))} </thead>