How to handle sorting rows that have checkboxes in ReactJS?

I am working on a ReactJS application that shows rows of transfers, with each row having three checkboxes in it. The checkboxes represent the action which shall be done regarding the transfer.

I added the sort functionality, where my rows can be sorted by different columns. My state has a JSON array that has the rows, so I added for each row in the state a value that is 0, 1, or 2 according to which checkbox is selected. The state is updated correctly regarding the row.selected value, but the checkboxes become empty when the rows change order.

The hierarchy is as follows: Transfers class is the one that has the state and all rows, it calls the Row function, which is in another JS file if that is relevant.

I tried to do this using the defaultChecked in the like this:

<input type="radio" name={row.num} entity={entity} transfer={transfer} segment={segment} defaultChecked={row.selected===0} onClick={((e) => props.checkboxClicked(e))} value="No-action"/>

but this only worked on the initial state, so when I change the checked box, even though render() is called for Transfers, the rows are sorted and the checkboxes don't follow them. Some checkboxes remain as they were, even though row changes, while some become cleared (all three in the row)

What I am trying to achieve is when row number 1 has checkbox "Yes" selected for example, and I click sort, 1 goes to third place, and the third row which is called 1 now, has checkbox "Yes" selected. How can this be achieved?