the code looks like this :

<DragDropContext>
              <Droppable droppableId="tasklist">
                {(provided) => (
                  <ul className="tasklist" {...provided.droppableProps} ref={provided.innerRef}> 
                    {this.state.tasks.map((task, index) => (
                      <Draggable key={uuid()} draggableId={uuid()} index={index}>
                        {(provided) => (
                          <li ref={provided.innerRef} {...provided.draggableProps} {...provided.dragHandleProps}>
                            <button className='btn bg-transparent' onClick={() => this.removeTask(index)}><p key={index} className="task">{task.type || "test"} | {this.formatTime(task.time || 60)}</p></button>
                          </li>
                        )}
                      </Draggable>
                    ))}
                    {provided.placeholder}
                  </ul>
                )}
              </Droppable>
            </DragDropContext>

I followed this (https://www.freecodecamp.org/news/how-to-add-drag-and-drop-in-react-with-react-beautiful-dnd/) guide and tried to fit it to my code, anyone know what could be wrong?