How fix this error Warning: Prop `data-rbd-draggable-context-id` did not match. Server: "7" Client: "0"

Question

My Code:

Server side works fine.

Error terminal image Error terminal image

There are error messages here. I tried many variants but could not find a solution. I need creative solutions. Sometimes when I look at the code too much, I can't see the errors. Chatgpt also fell short in this regard.

Note: I have to deliver the project within 3 days. So I request you please take a look at my code

import React, { useState, useEffect, useRef } from 'react';
import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';

const DragAndDropExample = () => {
  const [data, setData] = useState([]);
  const droppableRef = useRef(null);
  const [newTodo , setNewTodo] = useState("")

  const CreateTodo = ()=>{
    ...
}

  const CompleteTodo = (id) => {
    ...
  };

  const DeleteTodo = (id) => {
    fetch(`http://localhost:1283/todo/delete/${id}`, {
      method: "DELETE",
      headers: {
        "Content-Type": "application/json",
        "Authorization": "Bearer " + localStorage.getItem("jwt")
      }
    })
      .then(res => res.json())
      .then(() => {
        // Eski veriyi güncelle
        setData(prevData => {
          // Silinen öğeyi veri listesinden çıkar
          const updatedData = prevData.filter(item => item._id !== id);
          return updatedData;
        });
      });
  };

  useEffect(() => {
    fetch('http://localhost:1283/mytodo', {
      headers: {
        "Authorization": "Bearer " + localStorage.getItem("jwt")
      }
    })
      .then(res => res.json())
      .then(result => {
        console.log(result.mytodo);
        setData(result.mytodo);
      });
  }, []);

  const handleDragEnd = (result) => {
    if (!result.destination) return;

    // Yer değiştirme işlemini gerçekleştir
    const newItems = Array.from(data);
    const [reorderedItem] = newItems.splice(result.source.index, 1);
    newItems.splice(result.destination.index, 0, reorderedItem);

    // Sıralanmış öğeleri güncelle
    setData(newItems);

    // Yer değiştikten sonra veriyi güncelle
    setData(newItems.map(item => ({
      ...item,
      isCompleted: data.find(d => d._id === item._id).isCompleted
    })));

    // Eğer sürüklenen öğe silindi ise, güncellenmiş veriyi kontrol edin
    if (result.type === 'REORDER' && !newItems.find(item => item._id === result.draggableId)) {
      setData(prevData => prevData.filter(item => item._id !== result.draggableId));
    }
  };


  return (  
    <DragDropContext onDragEnd={handleDragEnd} onBeforeCapture={() => droppableRef.current && droppableRef.current.removeAttribute('data-rbd-draggable-context-id')}>
      <div className='flex flex-col items-center justify-center'>
        <h1 className='mb-4 text-3xl font-semibold'>Todot's</h1>
        <div className='flex items-center py-4 max-w-[300px] mx-4 justify-center'>
          <input className='p-4 bg-white rounded-lg' value={newTodo} onChange={(e) => setNewTodo(e.target.value)} />
          <div className="group" onClick={()=> CreateTodo()}>
            <img src='/icon/plus.svg' alt='' className='group-hover:hidden min-w-6 w-14  mx-2 p-3.5 cursor-pointer' />
            <img src='/icon/plus_white.svg' alt='' className='hidden group-hover:block min-w-6 w-14 mx-2 p-3.5 cursor-pointer bg-[#4942E4] rounded-md' />
          </div>
        </div>
        <Droppable droppableId="droppable" innerRef={droppableRef}>
          {(provided) => (
            <div
              className="bg-slate-200"
              ref={(ref) => {
                provided.innerRef(ref);
                droppableRef.current = ref;
              }}
              {...provided.droppableProps}
            >
              {data.map((item, index) => (
                <Draggable key={item._id} draggableId={item._id} index={index}>
                  {(provided, snapshot) => (
                    <div
                      className='p-1'
                      ref={provided.innerRef}
                      {...provided.draggableProps}
                      {...provided.dragHandleProps}
                      data-rbd-draggable-context-id={undefined} // Özelliği kaldır
                    >
                      <div className='bg-white m-1 py-5 px-4 rounded-md min-w-[300px] flex items-center justify-between cursor-default'>
                        <span className={item && item.isCompleted ? 'line-through' : ''}>{item.toDoText}</span>
                        <div className="flex items-center justify-around">
                          <div className="group" onClick={() => DeleteTodo(item._id)}>
                            <img src='/icon/trash.svg' alt='' className='group-hover:hidden w-8 mx-1 p-1.5 cursor-pointer' />
                            <img src='/icon/trash_white.svg' alt='' className='hidden group-hover:block min-w-4 w-8 mx-1 p-1.5 cursor-pointer bg-red-500 rounded-md' />
                          </div>
                          <div className="group" onClick={() => CompleteTodo(item._id)}>
                            <img src='/icon/check.svg' alt='' className='group-hover:hidden min-w-6 w-8 mx-2 p-1.5 cursor-pointer' />
                            <img src='/icon/check_white.svg' alt='' className='hidden group-hover:block min-w-6 w-8 mx-2 p-1.5 cursor-pointer bg-green-500 rounded-md' />
                          </div>
                        </div>
                      </div>
                    </div>
                  )}
                </Draggable>
              ))}
              {provided.placeholder}
            </div>
          )}
        </Droppable>
      </div>
    </DragDropContext>
  );
};

export default DragAndDropExample