How to apply Ascending and Descending button icons visible when loading the site right away?

[KoichaDev]

I found out that I need to use disableSortRemove: true in order to make it toggling either ascending or descending followed by this URL here below:

#3507

The issue is my situation I can't get the icon to display right away when loading the site. I have to click on the header column first to display the icon.

Is there a way to make those icons to visible when loading the site right away?

Here is my short code snippet below:

... 

const columns = useMemo(() => COLUMNS, []);
   const mockData = useMemo(() => MOCK_DATA, []);
   const defaultColumn = useMemo(() => {
      return {
         Filter: TableColumnFilter
       }
}, []);


... 
<table className={styles.table} {...getTableProps()}>
   <thead>
      {headerGroups.map(headerGroup => { 
          return <tr {...headerGroup.getHeaderGroupProps()}>
            {headerGroup.headers.map(column => {
		return <th {...column.getHeaderProps(column.getSortByToggleProps())}>
		   {column.render('Header')}
		     <span>
			{column.isSorted ? (column.isSortedDesc ? '🔽' : '🔼') : ''}
		     </span>
		   </th>
	    })}
	</tr>
       })}
</thead>