Array not changing when dragging react?

Question

React

Array doesn't change on drag

import React, {useState} from 'react';
import style from "../Board.module.css"

const Board = ({title, board, boards, currentBoard, currentItem, setCurrentBoard, setItem, setBoards}) => {

    // console.log(title)

    function dragOverHandler(e) {
        e.preventDefault()

        if (e.target.className == "item") {
            e.target.style.boxShadow = '0 2px 3px black'
        }
    }

    function dragLeaveHandler(e) {
        e.target.style.boxShadow = 'none'
    }

    function dragStartHandler(e, board, item) {
        setCurrentBoard(board)
        setItem(item)
    }

    function dragEndHandler(e) {
        e.target.style.boxShadow = 'none'
    }

    function dragHandler(e, board, item) {
        e.preventDefault()
        const currentIndex = currentBoard.items.indexOf(currentItem)
        currentBoard.items.splice(currentIndex, 1)

        const dropIndex = board.items.indexOf(item)
        board.items.splice(dropIndex + 1, 0, currentItem)

        setBoards(boards.map(b => {
            if (b.id === board.id) {
                return board
            }
            if (b.id === currentBoard.id) {
                return currentBoard
            }
            return b

        }))
    }

    return (
        <div>
            <div className="board__header">{title}</div>

                {board.items.map((item, index) =>
                        <div
                            onDragOver={event => dragOverHandler(event)}
                            onDragLeave={event => dragLeaveHandler(event)}
                            onDragStart={event => dragStartHandler(event, board, item)}
                            onDragEnd={event => dragEndHandler(event)}
                            onDrag={event => dragHandler(event, board, item)}
                            draggable={true} className="item">{item.title}</div>
                )}
        </div>
    );
};

export default Board

This is the Boards component (where all the boards are displayed, there are 3 of them so far and so far they are in the local state)

import React, {useState} from 'react';
import Board from "./Board/Board"
import style from "./Board.module.css"

const Boards = () => {
    const [boards, setBoards] = useState([
        {id: 1, title: "Сделать", items: [{id: 3, title: "Пойти в магазин"}, {id: 4, title: "Пойти в магазин"}]},
        {
            id: 2,
            title: "Проверить",
            items: [{id: 8, title: "Пойти в магазин"}, {id: 9, title: "Пойти в магазин"}, {
                id: 5,
                title: "Пойти в магазин"
            }]
        },
        {id: 3, title: "Сделано", items: [{id: 7, title: "Пойти в магазин"}]}
    ])

    const [currentBoard, setCurrentBoard] = useState(null)
    const [currentItem, setItem] = useState(null)
    return (
        <div className={style.board}>
            {boards.map((board, index) =>
                <div className={style.board_items}>
                    <Board
                        title={board.title}
                        board={board}
                        boards={boards}
                        setBoards={setBoards}
                        currentBoard={currentBoard}
                        setCurrentBoard={setCurrentBoard}
                        setItem={setItem}
                        currentItem={currentItem}/>
                </div>
            )}

        </div>
    );
};

export default Boards;

In the dragHandler function, when dragging, nothing works, apparently the parameter is not being passed correctly (I'm trying to make an analogue of the Trello board)
How to transfer the array correctly? Help me to understand!

Answer 1

In the last answer , I advised you to look carefully and check your code with the one in the video tutorial. I don’t understand, do you have strabismus or the screen is cloudy, or what is stopping you? I did everything one by one and everything works for me!
The function that you called dragHandler is actually called dropHandler and it is hung up not on the onDrag event, but on the onDrop event!!!