So I'm using ant design (antd). I have created a table with custom pagination. Each page change an API call is made to retrieve a new set of data.

I have successfully implemented code that saves my individual checked boxes while changing pages. Example: on the first page i select 3 checkboxes, then i go to the second and check 2 there, then go to the third and check 5 there. My final state amounts to 10 checked boxes and they are successfully displayed as checked on the table itself.

The next thing i want to achieve is the same but using the check all button on the antd table. I want to be able to select all items from the first page, then go to the second one and select all, then third one and select all and have it all saved and displayed across pages in the table.

The state for individual checking and check all should be shared.

My selectedKeys state:

 const [selectedRowKeys, setSelectedRowKeys] = useState([]);

My row selection

  const onSelectChange = (row) => {
    setSelectedRowKeys((prevKeys) => [...prevKeys, row]);
  };
  const rowSelection = {
    selectedRowKeys: selectedRowKeys.map((item) => item.id), //error line
    preserveSelectedRowKeys: true,
    onSelect: (row, selected, selectedRows) => {
      if (selected) {
        onSelectChange(row);
        setSelectedRow(selectedRows);
        
      } else {
        setSelectedRowKeys((prevKeys) =>
          prevKeys.filter((key) => key.id !== row.id)
        );
      }
    },
    onSelectAll: (selected, row, selectedRows) => {
      if (selected) {
        setSelectedRowKeys(row); //not sure im doing the right thing here
        setSelectedRow(selectedRows); 
      } else {
        //dont know what to put here
      }
    },
  };

The problem arrives after i check everything on the first page and go to the second. When i try to check all items there the app breaks and i get errors such as cant read id of undefined in the //error line and pretty much everywhere where i have to map over selectedRowKeys.