How to reorder items by previous and new index in an array

Question

I have an array of items that are objects. My goal is to move all selected items from the array to the index they are being dropped on. An item becomes selected when Ctrl is pressed on it and the color changes to red. I am trying to achieve this behavior by saving the index the first selected item is on and then inserting it in the array on the dropped index in the reorder function, but currently my items disappear for some reason and it does not work. How can I achieve this? Here is my main.jsx code:

import React, { useState, useEffect } from 'react';
import * as ReactDOM from 'react-dom';
import { Grid, GridColumn as Column } from '@progress/kendo-react-grid';
import { DragAndDrop } from '@progress/kendo-react-common';
import { DraggableRow } from './draggable-row';
import { Checkbox } from '@progress/kendo-react-inputs';
import { DragHandleCell } from './drag-handle-cell';
import products from './products.json';
import {
  groupBy,
  GroupDescriptor,
  GroupResult,
} from '@progress/kendo-data-query';
import { groupBy } from '@progress/kendo-data-query';

export const ReorderContext = React.createContext({
  reorder: () => {},
  dragStart: () => {},
});

const App = () => {
  const [gridData, setGridData] = React.useState(products);
  const [activeItem, setActiveItem] = React.useState(null);

  const reorder = (dataItem, direction) => {
    if (activeItem === dataItem) {
      return;
    }

    let reorderedData = gridData.slice();

    console.log(reorderedData);

    let selectedItems = reorderedData.filter((el) => {
      return el.selected === true;
    });

    let prevIndex = reorderedData.findIndex((p) => {
      if (selectedItems.length) {
        return p === selectedItems[0];
      }
      return p === activeItem;
    });

    let nextIndex = reorderedData.findIndex((p) => p === dataItem);

    console.log(prevIndex, nextIndex);

    reorderedData.splice(prevIndex, selectedItems.length || 1);

    if (!selectedItems.length) {
      reorderedData.splice(Math.max(nextIndex + prevIndex), 0, activeItem);
    }

    console.log(reorderedData);
    setGridData(reorderedData);
  };

  const dragStart = (dataItem) => {
    setActiveItem(dataItem);
  };

  return (
    <ReorderContext.Provider
      value={{
        reorder: reorder,
        dragStart: dragStart,
      }}
    >
      <DragAndDrop>
        <Grid
          style={{
            height: '400px',
          }}
          data={gridData}
          dataItemKey={'ProductID'}
          rowRender={(row, rowProps) => (
            <DraggableRow elementProps={row.props} {...rowProps} />
          )}
        >
          <Column title="" width="80px" cell={DragHandleCell} />
          {/* <Column title="" width="80px" cell={CustomCell} /> */}
          <Column field="ProductID" title="ID" width="60px" />
          <Column field="ProductName" title="Name" width="250px" />
          <Column field="Category.CategoryName" title="CategoryName" />
          <Column field="UnitPrice" title="Price" width="80px" />
          <Column field="UnitsInStock" title="In stock" width="80px" />
        </Grid>
      </DragAndDrop>
    </ReorderContext.Provider>
  );
};

ReactDOM.render(<App />, document.querySelector('my-app'));

And here is a runnable example:

https://stackblitz.com/edit/react-cv2hnu-9pvnr6?file=app/main.jsx