After successfully adding data, upon scrolling an item was removed

Question

I am using react-table with react-window-infinite-loader and react-window for infinite scrolling. Initially the table has 20 items(data) on fetch from API. After adding a new data into my table it will successfully update(thru redux) and the data will be 21 now and rows with 21 too. But after scrolling and scrolling the data still has an extra 1 data(ex. 21 > 41 etc. every scroll adds 20 items fetching from API) but the rows is different in length after a few scroll in the table(ex. 21 > 40) 1 row was automatically or suspiciously removed see Row(index) 21 was removed image(without any actions made just by scrolling) index 21 was removed. This will occur an error because the last index of the table now will be 40 and the length of the rows only 40 the below snippet of code will be undefined

const RenderRow = ({ index, style }) => {
        const row = rows[index]; // this will be undefined
        prepareRow(row);
        return useMemo(
            () => (
                <Row
                   row={row}
                  // some props
                />
            ),
            [row],
            areEqual
        );
    };

Rows and Data length

Row(index) 21 was removed

Answer 1

I got the solution, the problem is duplicating the data when I fetch data from API every scroll. What I did is remove the duplicate data(i.e using uniqBy function from lodash module)