I am using react-virtualized to create an infinite scroll in my React app. Because list items can be of different heights, I am using CellMeasurer from react-virtualized to render list items. I also have an intersection observer that listens for scroll and loads more data as user scrolls down. The code looks like this:

const rowRenderer = ({ key, index, style, parent }) => 
        <CellMeasurer
            cache={cache.current}
            parent={parent}
            columnIndex={0}
            rowIndex={index}>
                <ListItem
                    key={key}
                    listData={listData[index]}
                    style={style}
                    setObserver={setObserver}
                />
        </CellMeasurer>

<AutoSizer>
{
    () => ({ width, height }) => 
        <List
            width={width}
            height={height}
            rowHeight={cache.current.rowHeight}
            deferredMeasurementCache={cache.current}
            rowCount={listData.length}
            rowRenderer={rowRenderer}
        />
}
</AutoSizer>

This works fine except React gives a warning that each item of List should have a unique key. If I move the key={key} to CellMeasurer from ListItem to fix this, the warning goes away but the code doesn't load new data anymore on scroll.

I am not sure why this is happening?

The app also allows deleting a list item from the list. However, when the deletion happens, the list scrolls down by a significant number of rows, rather than staying at that scroll position. How do I fix this?