I am using React DnD library version 16.0.1. When I drag a component, the object I drag is too transparent.

This is my code:

<div
   ref={(node) => drag(drop(node))}
   className={`col-12 col-md-6 col-lg-2 mb-3 draggable ${isDragging ? 'is-dragging' : ''}`}>
      <ServerComponent />
</div>

This is my css:

.draggable {
    opacity: 1;
    cursor: move;
    transition: transform 0.2s;
}

.is-dragging {
    transform: scale(1.01);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}