useSortBy sets descending on adjacent column not column that is clicked

[hughesthatgirl]

Hello,

I am using react-table v7 to create a basic datatable with column sorting. I am adding an aria-sort attribute to the column headers (<th>) tags.

What I am trying to do is make sure that when someone decides to sort a specific column, when isSortedDesc is true, the aria-sort attribute should get set to aria-sort='descending' otherwise it should be set to aria-sort='ascending' and if isSorted is true then set aria-sort='none'

I am able to set aria-sort correctly based on the conditions, but the problem I'm running in to is that when I click on "First Name" it doesn't change the aria-sort attribute for that column but instead changes the aria-sort attribute for "Last Name" and so on.

Any ideas why this is happening?

You can see the problem in this code sandbox. Inspect the table header and you should see the aria-sort attribute on each <th>. Try to sort by "First Name" and you will see that the aria-sort attribute on "Last Name" changes.

https://codesandbox.io/s/happy-sammet-677rfi?file=/src/App.js