Showing prohibition Icon even in dragging time and need an empty space on dragged slide

I am using drag and drop in my project for slides. What I done is drag a slide and swap slide position with other.It works perfectly. But the issue is the symbol

comes even if it is allow to drag .I want to remove this icon and show drag icon while draging.Also I need an empty space on dragged slide. My code is

  onDragStart = (event, index) => {
        this.draggedItem = this.state.slides[index];
    
        event.dataTransfer.setDragImage(event.target.parentNode, 20, 20);
        event.dataTransfer.effectAllowed = "move";
        event.dataTransfer.setData("text/html", event.target.parentNode);
    };
    
    onDragOver = index => {
        const { slides } = this.state;
        const hoveredItem = slides[index];
    
        if (this.draggedItem === hoveredItem) {
            return;
        }
    
        const filteredItems = slides.filter(item => item !== this.draggedItem);
    
        filteredItems.splice(index, 0, this.draggedItem);
    
        this.setState({ slides: filteredItems });
    };
    
    onDragEnd = () => {
        this.draggedIdx = null;
    };


    <div className="draggableList">
            <div key={data} onDragOver={() => onDragOver(index)}>
            <div  className="handle"
                      draggable
                      onDragStart={event => onDragStart(event, index)}
                      onDragEnd={onDragEnd}>
                <div class="d-flex justify-content-center" style={{ fontWeight: "bold", paddingTop: "20px" }}>{"Slide " + (index + 1)}</div>
                <div className={"py-3 d-flex justify-content-center course_slide slide_" + index}>
                    <div style={{ backgroundColor: 'white', height: 150, width: 120, boxShadow: '4px 4px 5px grey', cursor: 'pointer', overflowY: 'hidden', border: selected ? '2px solid limegreen' : '', position: 'relative' }} onClick={onClick}>
                        <h1 style={{ fontSize: 7 }}>{data.title}</h1>
                        <div style={{ fontSize: 4 }} dangerouslySetInnerHTML={{ __html: data.description }}>
                        </div>
                        {onDelete && <div onClick={onDelete} style={{ padding: 4, position: 'absolute', bottom: 0, right: 0 }}><DeleteOutline /></div>}
                    </div>
                </div>
            </div>
        </div>
        </div>

Can anyone please help me to sort out this issue?