Problem drag and drop React library won't' work properly

Question

I am having a problem in my project. I am building a kanban and using the library react-beautiful-dnd the problem I am facing is that when i load the page it won't allow me to drag and drop the component

and also when deleting a task is also blocking from drag and drop only when i create I cna them drag and drop a component.

https://github.com/fabioniglio/Kanban-Board-app The last version is on this branch https://github.com/fabioniglio/Kanban-Board-app/tree/fabio_dev_all_changes

import classes from "../styles/Card.module.css";
import deleteImg from "../assets/images/delete.png";
import descriptionImg from "../assets/images/description.png";
import lowPriority from "../assets/images/low-priority.png";
import mediumPriority from "../assets/images/medium-priority.png";
import highPriority from "../assets/images/high-priority.png";

import { Draggable } from "react-beautiful-dnd";

const Card = ({ cardData, onClickHandler, onDelete, index }) => {
  return (
    <Draggable
      key={`${cardData.id}`}
      draggableId={`${cardData.id}`}
      index={index}
    >
      {(provided) => (
        <div
          ref={provided.innerRef}
          {...provided.draggableProps}
          {...provided.dragHandleProps}
          className={classes.container}
          onClick={onClickHandler}
        >
          <div className={classes.firstLine}>
            <h4 className={classes.heading}>{cardData.title}</h4>
            <div>
              {cardData.priority === "High" && (
                <img
                  src={highPriority}
                  alt="High Priority"
                  className={classes.priority}
                />
              )}
              {cardData.priority === "Medium" && (
                <img
                  src={mediumPriority}
                  alt="Medium Priority"
                  className={classes.priority}
                />
              )}
              {cardData.priority === "Low" && (
                <img
                  src={lowPriority}
                  alt="Low Priority"
                  className={classes.priority}
                />
              )}
              <button type="button" onClick={onDelete} className={classes.btn}>
                <img
                  src={deleteImg}
                  alt="Delete Image"
                  className={classes.btnImg}
                />
              </button>
            </div>
          </div>
          <div className={classes.secondLine}>
            {cardData.description && (
              <div className={classes.descContainer}>
                <img
                  src={descriptionImg}
                  alt="Description"
                  className={classes.descImg}
                />
                <span className={classes.tooltip}>
                  This card has a description
                </span>
              </div>
            )}
            <span className={classes.assignee}>
              {cardData.assignee.split(" ").reduce((finalStr, currentStr) => {
                return finalStr + currentStr[0].toUpperCase();
              }, "")}
            </span>
          </div>
        </div>
      )}
    </Draggable>
  );
};

export default Card;

I tried checking documentation and looking to options and props to use but nothing worked