I create my custom AppTable component with @tanstack/react-table. Then in parent component i want add button which will trigger delete checked rows in my AppTable component. For that i declare selected state in parent component and pass setSelected function as callback to update state after any row checked in AppTable component. The problem happens when I try to delete any row. I can't cause a state change in a child component AppTable from a parent component. In @tanstack/react-table for row selected API use rowSelected state which consists of internal ids of checked rows. For delete I need original Ids from data array.
Example in sandbox. You can try delete last row and you will see that in header checkbox will still checked. You can try delete row in middle and you will see that next row will have checked state.
Please suggest how to implement the removal of rows from the AppTable component, if the button for deletion is outside this component. After deleting rows, the state of checked rows should be empty
