When i move any column into the last column position its return destination null but the interesting thing is its only happen when the length of the colums is more than 3?

[Ammadshafi]

My Code

'use client';

import PropTypes from 'prop-types';
import { useState, useEffect } from 'react';
// eslint-disable-next-line import/no-extraneous-dependencies
import { Droppable, DragDropContext } from '@hello-pangea/dnd';

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

import { moveTask, GetBoard, moveBoard } from 'src/api/kanban';

import Scrollbar from 'src/components/scrollbar';

import KanbanColumn from '../kanban-column';
import KanbanColumnAdd from '../kanban-column-add';
import { KanbanColumnSkeleton } from '../kanban-skeleton';
// ----------------------------------------------------------------------

export default function KanbanView({ projectId }) {
  const [boardLoading, setBoardLoading] = useState(false);
  const [board, setBoard] = useState([]);
  const [refetch, setRefetch] = useState(false);

  useEffect(() => {
    const fetchBoards = async () => {
      setBoardLoading(true);
      try {
        const response = await GetBoard(projectId);
        if (response?.status === 200) {
          setBoard(response?.data);
        }
      } catch (err) {
        console.error(err);
      } finally {
        setBoardLoading(false);
      }
    };
    fetchBoards();
  }, [projectId, refetch]);

  const onDragEnd = async ({ destination, source, draggableId, type }) => {
    console.log({ destination, source, draggableId, type });
    if (!destination) return;

    if (destination.droppableId === source.droppableId && destination.index === source.index) {
      return;
    }

    if (type === 'COLUMN') {
      setBoard((prevBoard) => {
        let newBoard = [...prevBoard];

        // Defining Position
        const destinationPosition = destination?.index + 1;
        const sourcePosition = source.index + 1;

        const itemIndex = newBoard.findIndex((board) => board?.id === draggableId);

        if (itemIndex !== -1) {
          const movedBoard = newBoard[itemIndex];

          if (movedBoard) {
            newBoard = newBoard.map((entry) => {
              if (
                movedBoard?.position > destinationPosition &&
                entry?.position >= destinationPosition &&
                entry?.id !== movedBoard?.id &&
                entry?.position <= sourcePosition
              ) {
                return {
                  ...entry,
                  position: entry.position + 1,
                };
              } else if (
                movedBoard?.position < destinationPosition &&
                entry?.position <= destinationPosition &&
                entry?.position >= sourcePosition &&
                entry?.id !== movedBoard?.id
              ) {
                return {
                  ...entry,
                  position: entry.position - 1,
                };
              } else {
                return entry;
              }
            });

            newBoard[itemIndex] = {
              ...movedBoard,
              position: destinationPosition,
            };
          }
        }

        console.log(newBoard);
        return newBoard;
      });

      try {
        await moveBoard(projectId, source, destination, draggableId);
      } catch (error) {
        console.error(error);
      }
    } else {
      setBoard((prevBoard) => {
        const newBoard = [...prevBoard];

        // Defining Position
        const destinationPosition = destination?.index + 1;
        const sourcePosition = source.index + 1;

        // Defining Indexes for source destination and item
        const sourceColumnIndex = newBoard.findIndex((column) => column.id === source.droppableId);
        const destinationColumnIndex = newBoard.findIndex(
          (column) => column.id === destination.droppableId
        );
        const itemIndex = newBoard[sourceColumnIndex].boardstepentry.findIndex(
          (entry) => entry.id === draggableId
        );

        if (itemIndex !== -1) {
          const [movedTask] = newBoard[sourceColumnIndex].boardstepentry.splice(itemIndex, 1);
          if (movedTask) {
            // Adjust the positions in the destination column
            newBoard[destinationColumnIndex].boardstepentry = newBoard[
              destinationColumnIndex
            ].boardstepentry.map((entry, index) => {
              if (
                entry.postion >= destinationPosition &&
                destination.droppableId !== source.droppableId
              ) {
                return { ...entry, position: index + 2 };
              } else {
                return entry;
              }
            });

            // Adjust the positions in the source column
            newBoard[sourceColumnIndex].boardstepentry = newBoard[
              sourceColumnIndex
            ].boardstepentry.map((entry, index) => {
              if (
                destination?.droppableId !== source?.droppableId &&
                entry?.postion > sourcePosition &&
                movedTask?.id !== entry?.id
              ) {
                return {
                  ...entry,
                  position: index - 2,
                };
              } else {
                return entry;
              }
            });

            newBoard[sourceColumnIndex].boardstepentry = newBoard[
              sourceColumnIndex
            ].boardstepentry.map((entry) => {
              if (destination.droppableId === source.droppableId) {
                if (
                  movedTask?.position > destinationPosition &&
                  entry?.position >= destinationPosition &&
                  entry?.id !== movedTask?.id &&
                  entry?.position <= sourcePosition
                ) {
                  return {
                    ...entry,
                    position: entry.position + 1,
                  };
                } else if (
                  movedTask?.position < destinationPosition &&
                  entry?.position <= destinationPosition &&
                  entry?.position >= sourcePosition &&
                  entry?.id !== movedTask?.id
                ) {
                  return {
                    ...entry,
                    position: entry.position - 1,
                  };
                } else {
                  return entry;
                }
              } else {
                return entry;
              }
            });

            newBoard[destinationColumnIndex].boardstepentry.splice(destination.index, 0, {
              ...movedTask,
              last_move_at:
                destination.droppableId === source.droppableId
                  ? movedTask?.last_move_at
                  : new Date(Date.now()).toISOString(),
              position: destinationPosition,
            });
          }
        }

        return newBoard;
      });

      try {
        await moveTask(projectId, source, destination, draggableId);
      } catch (error) {
        console.error(error);
      }
    }
  };

  const renderSkeleton = (
    <Stack direction="row" alignItems="flex-start" spacing={3}>
      {[...Array(4)].map((_, index) => (
        <KanbanColumnSkeleton key={index} index={index} />
      ))}
    </Stack>
  );

  console.log('Real State Data', board);
  return (
    <>
      {boardLoading ? (
        renderSkeleton
      ) : (
        <Stack
          direction="row"
          alignItems="flex-start"
          sx={{
            p: 0.25,
            height: 1,
          }}
        >
          <DragDropContext onDragEnd={onDragEnd}>
            <Droppable droppableId="board" type="COLUMN" direction="horizontal">
              {(provided) => (
                <Scrollbar sx={{ height: 1, minHeight: { xs: '80vh', md: 'unset' } }}>
                  <Stack
                    ref={provided.innerRef}
                    {...provided.droppableProps}
                    spacing={3}
                    direction="row"
                    alignItems="flex-start"
                    sx={{ p: 0.5, height: 1 }}
                  >
                    {board
                      .sort((a, b) => a.position - b.position)
                      .map((boardData, index) => (
                        <KanbanColumn
                          key={boardData.id} // Ensure key is unique
                          index={index}
                          projectId={projectId}
                          column={boardData}
                          tasks={boardData.boardstepentry}
                          setRefetch={setRefetch}
                          setBoard={setBoard}
                          allBoards={board}
                        />
                      ))}
                    {provided.placeholder}

                    <KanbanColumnAdd
                      setBoard={setBoard}
                      projectId={projectId}
                      setRefetch={setRefetch}
                    />
                  </Stack>
                </Scrollbar>
              )}
            </Droppable>
          </DragDropContext>
        </Stack>
      )}
    </>
  );
}

KanbanView.propTypes = {
  projectId: PropTypes.string,
};