While sorting, the item being sorted is invisible, unlike the example

I am struggling to figure out why the item is invisible while dragging. My items are images with crossOrigin="Anonymous". In the examples, when you drag item, it becomes slightly translucent but not invisible. how can i have the same behavior in my example? should i switch to ul/li instead of div’s, or what?

side note: i discover index prop is not passed to render, so i have to pass my own variable called i

const SortableItem = SortableElement(({ctx,value,index,i}) => {
    // index prop is not passed!!!
    console.log(ctx,value,i);
    //debugger;
    return(
        <div class="reorder-slide-item">
            <p class="p4 item-no">{i+1}</p>
            <img crossOrigin="Anonymous" src={value} alt="" onLoad={e=>ctx.getImageLightness(e,i)}  />
            <button class="button link item-remove" ref={ref=>ctx.btn[i]=ref} onClick={()=>ctx.removeItem(i)}>Delete</button>
        </div>
    )
});

const SortableList = SortableContainer(({ctx,items}) => {
  return (
    <div>
      {items.map((value, index) => (
        <SortableItem key={index} ctx={ctx} index={index} value={value} i={index} />
      ))}
    </div>
  );
});

[p45mark]

I had this same issue when putting the sortable list in a Modal component, and when dragging the draggable item was “behind” the modal. Setting the z-index to 9999 resolved it

[clauderic]

Yeah, as mentioned by @p45mark this is often a z-index issue. If you find that is the case, try applying a higher z-index value on the sortable clone using the helperClass prop.