I am creating a google keep type project and I wanted to add the functionality of dragging and dropping notes to re order them. I am getting the error placeholder not found

here is my code:

<CreateArea onAdd={addingNote}/>
  <DragDropContext>
  <Droppable droppableId="notesloop" >
  {
    (provided) => (
      <div className="notesloop" {...provided.droppableProps} ref={provided.innerRef}>
  
  {notes.map((currentNote,index) => {
    return (
      <Draggable key={index} draggableId={index.toString()} index={index}>
      {(provided) => (
        <div  ref={provided.innerRef} {...provided.draggableProps} {...provided.dragHandleProps}>
      <Note 
    onDel={deleteNote}
    id={index}
    title={currentNote.title}
    content={currentNote.content}
    ></Note>
    {provided.placeholder}
    </div>
    )}
    </Draggable>
    );
  })}
  </div>
    )
  }

     
     </Droppable>
     </DragDropContext>