Почему не работает useState в React Drag and Drop?

Question

[Timofei1997]

Здравствуйте, в данный момент изучаю React и пытаюсь разработать простой аналог trello, застрял на моменте с перетаскиванием карточек, для его реализации использую Drag and Drop. Проблема заключается в том, что у меня в обработчике onDragStart в state передаётся индекс элемента, который собираюсь перетаскивать, а в обработчике onDrop он передаётся уже в store приложение. Но происходит так, что в onDragStart передаётся одно значение, а в on Drop оно почему-то становится другое, ниже запись с лога:

Items.jsx:22 drag 1
Items.jsx:18 (2) [{…}, {…}]
Items.jsx:18 (2) [{…}, {…}]
Items.jsx:43 drop 0

И не понятно в каком месте и почему меняется state, можете, пожалуйста, объяснить, что не так.

Ниже прикладываю код.

import styles from './Items.module.css';
import {useSelector, useDispatch } from 'react-redux';
import checkMark from './img/checkMark.svg'
import { useState } from 'react';
import cn from 'classnames';
import {setStateOfItem, dragAndDropItem} from '@store/actions'
import { useCallback } from 'react';



const Items = ({nameInsideCard, nameBoard, index}) => {

    const [currentIndexOfItem, setCurrentIndexOfItem] = useState(Number)

    const storeData = useSelector(state=>state.newItemReducer)   
    const dispath = useDispatch()
    console.log(storeData);

    function dragStartHandler (e, index)  {
        
            console.log('drag', index);
            setCurrentIndexOfItem(index)
        
        
       
    }

    function dragLeaveHandler(e) {
        
    }

    function dragEndHandler(e) {
        
    }

    function dragOverHandler(e) {
        e.preventDefault()
        // e.target.style.background = 'lightgray'
    }

    function dropHandler(e, IndexOfItem, index, nameBoard, numbOfBoard) {
        console.log('drop', IndexOfItem);
        e.preventDefault()
        dispath(dragAndDropItem({currendIndex: IndexOfItem, dropIndex:index, nameOfBord: nameBoard, numbOfBoard: numbOfBoard}))

    }



    return (
        <>
            <div>
                {storeData.sort((prev, next) => prev.indexOfItems - next.indexOfItems).
                map((key, indexItem) => {
                    const objValues = Object.values(key)
                    if (objValues[0]===nameInsideCard && objValues[1]===nameBoard && objValues[5]===index) {
                        return (
                            <div 
                            draggable={true} 
                            onDragStart={e => dragStartHandler(e, objValues[3])}
                            onDragLeave={e => dragLeaveHandler(e)}
                            onDragEnd={e => dragEndHandler(e)}
                            onDragOver={e => dragOverHandler(e)}
                            onDrop={e => dropHandler(e, currentIndexOfItem, objValues[3], objValues[1], objValues[5])}
                            key={indexItem} className={cn(objValues[4] ? styles.container : styles.done__container)}>
                                <h3 className={styles.text}> {objValues[2]}</h3>
                                <img 
                                    className={styles.checkMark} 
                                    src={checkMark} 
                                    // onClick={() => switchItem ? setSwitchItem(false) : setSwitchItem(true)}
                                    onClick={() =>   dispath(setStateOfItem(objValues[3]))}
                                    alt="" />
                                    
                            </div>
                        )
                    }
                })}
            </div>
        </>
    )
}



export default Items;