"Unable to find drag handle" mistake in react-beautiful-dnd

Question

I have a list of cards that want to drag and drop. I want the user could drag and drop by pressing on the specific place (div) on the card (not the whole card). I transfer this div to the child component and add {...provided.dragHandleProps} on this div. Everything works ok, but I get mistakes in console, that Unable to find drag handle. How can I fix this problem?

 const posts = (
      <DragDropContext onDragEnd={this.dragDrop}>
        <Droppable droppableId="dragCards">
          {(provided) => (
            <div ref={provided.innerRef}>
              {cards.map((item, index) => {
                return (                    
                      <Draggable draggableId={item.key} index={index}>
                        {(provided) => (
                          <div                    
                            ref={provided.innerRef}
                            {...provided.draggableProps}
                          >
                            <Cards                                                              
                              dragChip={
                                <div {...provided.dragHandleProps}>
                                  {dragChip}
                                </div>
                              }  />
                          </div>
                        )}
                      </Draggable>                       
                );
              })}
              {provided.placeholder}
            </div>
          )}
        </Droppable>
      </DragDropContext>
    );

And this is div, that I transfer to the child component.

 const dragChip = (
      <div >
        drag me
      </div>
    );

Answer 1

Looks like your <Draggable> needs a key.

Before <Draggable draggableId={item.key} index={index}>

After <Draggable key={item.key} draggableId={item.key} index={index}>

https://github.com/atlassian/react-beautiful-dnd/issues/1673#issuecomment-571293508