I have a big matrix for representing data. After detecting a click event on the cell, a pop-up is opened and data is entered, which is then send to the backend and dataSouce is array is updated. The problem is that after updating the dataSouce, the whole grid re-renders and the scroll postition the grid was previously at is reset.

IgrDataGridModule.register();

const Matrix = (props) => {
    const { formData, priceMatrix, fetchPricingMatrixData, applyFilter } = props;
    const [data, setData] = useState([]);
    const [priceModal, setPriceModal] = useState(false);
    const [modalData, setModalData] = useState({});
    const [cellCoordinates, setCellCoordinates] = useState();

    const gridRef = useRef();

    useEffect(() => {
        fetchPricingMatrixData(formData);
    }, []);

    useEffect(() => {
        if (priceMatrix.failed) {
            toast.error('failed to get matrix data', { ...toasterFade });
        }
        setData(priceMatrix?.data ?? []);
    }, [priceMatrix]);

    useEffect(() => {
        if (gridRef.current && data.length > 0 && cellCoordinates) {
            gridRef.current.scrollTo(cellCoordinates.x, cellCoordinates.y);
        }
    }, [gridRef, data]);

    const toggleModal = () => {
        setPriceModal(!priceModal);
        gridRef.current.selectedCells.clear();
    };

    const generateColumns = () => {
        let columns = [];
        if (data.length > 0) {
            for (let obj of Object.keys(data[0])) {
                if (obj !== '$hashCode') {
                    columns.push(
                        <IgrTextColumn
                            name={obj}
                            key={obj === 'Zone' ? `${obj}.name` : `${obj}.price`}
                            field={obj === 'Zone' ? `${obj}.name` : `${obj}.price`}
                            headerText={`${obj}`}
                            width='*>170'
                            horizontalAlignment='center'
                            pinned={obj === 'Zone' ? 'left' : 'none'}
                            columnOptionsIconBehavior={obj === 'Zone' ? 'AlwaysVisible' : 'Unset'}
                            isColumnOptionsEnabled={obj === 'Zone' ? 'true' : 'false'}
                        />
                    );
                }
            }
        }
        return columns;
    };

    const onClick = (grid, v) => {
        console.log(grid, v);
        if (v instanceof IgrGridCellEventArgs) {
            const [selection] = grid.selectedCells.toArray();
            customLogger('selection args', selection, grid, v);
            if (selection && selection.columnUniqueKey !== 'Zone') {
                const cellData = {
                    ...selection.rowItem[selection.columnUniqueKey],
                    rowIndex: v.cellInfo.dataRow,
                    snappedX: v.cellInfo.snappedX - 170,
                    snappedY: v.cellInfo.snappedY - 120,
                    // columnIndex: Object.keys(selection.rowItem).indexOf(selection.columnUniqueKey),
                };
                setCellCoordinates({ x: v.cellInfo.snappedX - 200, y: v.cellInfo.snappedY - 170 });
                // grid.scrollTo(v.cellInfo.snappedX - 170, v.cellInfo.snappedY - 120);
                // console.log(v.cellInfo.snappedX, v.cellInfo.snappedY);
                setModalData(cellData);
                setPriceModal(true);
            }
        }
    };

    return (
        !priceMatrix.loading && (
            <>
                <IgrDataGrid
                    ref={gridRef}
                    dataSource={data}
                    height='62vh'
                    width='100%'
                    headerBackground='#f6f9fc'
                    autoGenerateColumns={'false'}
                    columnShowingAnimationMode='auto'
                    columnHidingAnimationMode='auto'
                    defaultColumnMinWidth={100}
                    isColumnOptionsEnabled='true'
                    rowHeight='40'
                    selectionMode={'SingleCell'}
                    // editModeClickAction="DoubleClick"
                    selectionBehavior='Toggle'
                    activationMode={'Cell'}
                    cellClicked={onClick}
                    filterUIType='ColumnOptions'
                    // editOnKeyPress={false}
                    // enterBehavior={'Edit'}
                    // enterBehaviorAfterEdit={'MoveRight'}
                    // cellClicked={(...props) => console.log(props[0].selectedCells.clear())}
                    editMode={'None'}
                >
                    {generateColumns()}
                </IgrDataGrid>
                <Modal active={priceModal} toggle={toggleModal} heading={'Pricing'} size={'md'} centered={true}>
                    <FixPriceModal
                        modalData={modalData}
                        setModalData={setModalData}
                        data={data}
                        setData={setData}
                        formData={formData}
                        toggle={toggleModal}
                        applyFilter={applyFilter}
                        setCellCoordinates={setCellCoordinates}
                    />
                </Modal>
            </>
        )
    );
};