How to lifting state up to selectedFlatRows

[mertcancet]

I want to buble up the selectedFlatRows but i take Maximum update depth exceeded error message. I try useCallback but doesnt work this my parent component

 const handleChangeSelectItem = useCallback(
    items => {
      setSelectedDataItem(items);
    },
    [setSelectedDataItem]
  );

<DataTable
        columns={columns1}
        data={data}
        onChangeSelection={handleChangeSelection}
        selectable
        selectedItems={handleChangeSelectItem}
      />

this is table component

  useEffect(() => {
    selectedItems(selectedFlatRows);
  }, [selectedFlatRows, selectedItems]);

  return (
    <Container>
      <button
        onClick={() => toggleAllRowsSelected()} //trigger select all rows
      >
        Select All Rows
      </button>
      <TableWrapper {...props} {...getTableProps()}>
        <HeaderWrapper>
          {
            // Loop over the header rows
            headerGroups.map(headerGroup => (
              // Apply the header row props
              // eslint-disable-next-line react/jsx-key
              <tr {...headerGroup.getHeaderGroupProps()}>
                {
                  // Loop over the headers in each row
                  headerGroup.headers.map((column, i) => (
                    // Apply the header cell props
                    <TableHeader key={i} {...column.getHeaderProps()}>
                      <Text variant="sm">
                        {
                          // Render the header
                          column.render('Header')
                        }
                      </Text>
                    </TableHeader>
                  ))
                }
              </tr>
            ))
          }
        </HeaderWrapper>
        <tbody {...getTableBodyProps()}>
          {
            // Loop over the table rows
            rows.map(row => {
              // Prepare the row for display
              prepareRow(row);
              return (
                // Apply the row props
                <TableRow striped={striped} {...row.getRowProps()}>
                  {
                    // Loop over the rows cells
                    row.cells.map(cell => {
                      // Apply the cell props
                      return (
                        <TableItem {...cell.getCellProps()}>
                          {
                            // Render the cell contents
                            cell.render('Cell')
                          }
                        </TableItem>
                      );
                    })
                  }
                </TableRow>
              );
            })
          }
        </tbody>
      </TableWrapper>

[handhikadj]

this may help: #3749 (comment)