I'm having a component in React. It's prop group should update when the state cloneMode change. For this I'm using the following code:
Structure:

const DraggableElement = ({ list, setList, cloneMode }) => {
 return (
    <ReactSortable
      group={
        cloneMode
          ? { name: "tasks_group", pull: "clone" }
          : "tasks_group"
      }
      key={cloneMode}
      list={list}
      setList={setList}
      animation={200}
      delay={1}
      className="task-child_drag"
    >
      {list.map((e) => {
        return <TaskItem key={e._id} task={e} />;
      })}
    </ReactSortable>
  );
};

Parent:

const Tasks = () => {
  const [cloneMode, setCloneMode] = useState(false);

  return (
    <div className="tasks">
            <DraggableElement
              list={todo}
              setList={setTodo}
              cloneMode={cloneMode}
            />
            <DraggableElement
              list={inProgress}
              setList={setInProgress}
              cloneMode={cloneMode}
            />
            <DraggableElement
              list={done}
              setList={setDone}
              cloneMode={cloneMode}
            />
          </div>
  );
};

When I run setCloneMode(true), it's not affecting the component. Any thoughts on how can I achieve it?