DND-KIT unable to make rows of table draggable and droppable

Trying to implement dnd-kit functionality for every row inside a table that is rendered inside of a modal.

I am trying to make the row that is created with map() method draggable and droppable inside the table. I have also created two simple components just to check if the dnd-kit is working at all and it does. But in that example I am just mapping over state that contains strings so the items prop that <SortableContext> is asking for is easy to pass. I am not sure if that is what is causing the problem in my app. If anyone can give me any suggestions or solution I would be very grateful!

This is the sortable item from the simple example that works:

import { useSortable } from "@dnd-kit/sortable";
import {CSS} from "@dnd-kit/utilities";

import Box from '@mui/material/Box';

function SortableItem(props) {

    const { 
      attributes,
      listeners,
      setNodeRef,
      transform,
      transition
    } = useSortable({id: props.id});

    const style = {
        transform: CSS.Transform.toString(transform),
        transition
    }
    return (
      <div ref={setNodeRef} style={style} {...attributes} {...listeners}>
          <Box sx={{margin: "5px", border: "1px solid gray"}}>
          <button>button</button>
              {props.id}
          </Box>
      </div>
        )
};

export default SortableItem;

This is the second piece of code that creates the working example:

import {useState} from 'react';
import Box from '@mui/material/Box';
import { DndContext, closestCenter } from "@dnd-kit/core";
import { arrayMove, SortableContext, verticalListSortingStrategy } from "@dnd-kit/sortable";
import SortableItem from "./sortableItem.js";

function DndKitTest() {
    const [people, setPeople] = useState(["Luka Jovicic", "Dejan Markic", "Branko Kovacevic", "Nemanja Djokic"]);

  return (
    <DndContext
      collisionDetection={closestCenter}
      onDragEnd={handleDragEnd}
    >
    <Box sx={{ padding: "5px", witdh: 10, border: "1px solid gray", margin: 5 }}>
      <h3>List of people!</h3>
      <SortableContext
        items={people}
        strategy={verticalListSortingStrategy}
      > 
       {people.map(person => <SortableItem key={person} id={person} />)}
      </SortableContext>
    </Box>
    </DndContext>
    );

    function handleDragEnd(event) {
        console.log("Drag end called");
        const {active, over} = event;
        console.log("ACTIVE: " + active.id);
        console.log("OVER: " + over.id);

        if(active.id !== over.id) {
           setPeople((items) => {
            const activeIndex = items.indexOf(active.id);
            const overIndex = items.indexOf(over.id);

            return arrayMove(items, activeIndex, overIndex)
           });
        }
    }
}

export default DndKitTest;

As for my APP I will provide two pieces of code that are using dnd-kit:

import React, { useMemo, Fragment, useState, useEffect } from 'react';
import TableRow from '@mui/material/TableRow';
import TableCell from '@mui/material/TableCell';
import IconButton from '@mui/material/IconButton';
import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward';
import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward';
import Button from '@mui/material/Button';
import Box from '@mui/material/Box';
import CloseOutlinedIcon from '@mui/icons-material/CloseOutlined';
import { useSortable } from "@dnd-kit/sortable";
import { CSS } from "@dnd-kit/utilities";

function SortingRow({ sortOrder, fields, moveRowUp, moveRowDown, handleOrderChange, resetSingleSort, rowItems, setRowItems, handleRowsChange }) {

     const [idVal, setIdVal] = useState("");

    const rows = sortOrder.map((item, index) => {
    const ID = `sortable-row-${index}`;
    const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id: ID });
    const style = {
      transform: CSS.Transform.toString(transform),
      transition
    };

    useEffect(() => {
      setIdVal(ID);
    }, [ID]);

    return (
      <TableRow key={index} ref={setNodeRef} style={style} {...attributes} {...listeners}>
        <TableCell>
          {fields.find((f) => f.name === item.field)?.label}
          <IconButton onClick={() => moveRowUp(item.field)}>
            <ArrowUpwardIcon />
          </IconButton>
          <IconButton onClick={() => moveRowDown(item.field)}>
            <ArrowDownwardIcon />
          </IconButton>
        </TableCell>
        <TableCell>
          <Box>
            <Button onClick={() => handleOrderChange(item.field, item.direction)}>
              {item.direction}
            </Button>
            <IconButton onClick={() => resetSingleSort(item.field)}>
              <CloseOutlinedIcon />
            </IconButton>
          </Box>
        </TableCell>
      </TableRow>
    );
  });

useEffect(() => {
handleRowsChange(rows, idVal);
}, []);

// console.log('CEO ROW IZ sortingROW', rows);
// console.log('ID IZ sortingROW', id);
// console.log('STATE ID IZ sortingRow', idVal);

  return <>{rows}</>;
}

export default SortingRow;

And the second one:

import React, { useState, useMemo } from 'react';
import PropTypes from 'prop-types';

import Table from '@mui/material/Table';
import TableBody from '@mui/material/TableBody';
import TableCell from '@mui/material/TableCell';
import TableHead from '@mui/material/TableHead';
import TableRow from '@mui/material/TableRow';
import Paper from '@mui/material/Paper';
import IconButton from '@mui/material/IconButton';
import Button from '@mui/material/Button';
import CloseOutlinedIcon from '@mui/icons-material/CloseOutlined';
import Box from '@mui/material/Box';
import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward';
import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward';
import { DndContext, closestCenter } from "@dnd-kit/core";
import { arrayMove, SortableContext, verticalListSortingStrategy } from "@dnd-kit/sortable";

import SortingRow from "./sortingRow.js";

function TableComponent({ sortOrder, setSortOrder, fields, moveRowUp, moveRowDown, handleOrderChange, resetSingleSort, onRowsUpdated, rows, id }) {

 const [rowsVal, setRowsVal] = useState([]);
 const [activeRowId, setActiveRowId] = useState("");
 const [overRowId, setOverRowId] = useState("");

 const handleRowsChange = (rows, idVal) => {
     setRowsVal(rows);
 };
     console.log("rowsVal", rowsVal);

  function handleDragEnd(event) {
    console.log("Drag end called!");
    const { active, over } = event;
    console.log("ACTIVE: " + active.id);
    console.log("OVER: " + over.id);

    setActiveRowId(active.id);
    setOverRowId(over.id);

    if (active.id !== over.id) {
      setSortOrder((items) => {
        const activeIndex = items.indexOf(active.id);
        const overIndex = items.indexOf(over.id);

        return arrayMove(items, activeIndex, overIndex);
      });
    }
  };

  return (
    <DndContext collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
      <Table sx={{ minWidth: 650 }} aria-label="simple table">
        <TableHead>
          <TableRow>
            <TableCell>Field</TableCell>
            <TableCell>Order</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          <SortableContext items={rowsVal} strategy={verticalListSortingStrategy}>
            <SortingRow
              sortOrder={sortOrder}
              fields={fields}
              moveRowUp={moveRowUp}
              moveRowDown={moveRowDown}
              handleOrderChange={handleOrderChange}
              resetSingleSort={resetSingleSort}
              handleRowsChange={handleRowsChange}
              activeRowId={activeRowId}
              overRowId={overRowId}
            />
          </SortableContext>
        </TableBody>
      </Table>
    </DndContext>
  );
}

TableComponent.propTypes = {
  sortOrder: PropTypes.array.isRequired,
  fields: PropTypes.array.isRequired,
  moveRowUp: PropTypes.func.isRequired,
  moveRowDown: PropTypes.func.isRequired,
  handleOrderChange: PropTypes.func.isRequired,
  resetSingleSort: PropTypes.func.isRequired,
};

export default TableComponent;

I think that passing the items prop inside the is being passed the wrong way? Maybe all the different buttons and functions inside the SortingRow are causing the problem? I am pretty sure that ID-s are not the problem, because when I try to drag the row at index 0 over the row that is on index 1 everything console.log-s correctly.