My items get deformed when using a sortable list

[Ivnoff1]

Hi guys, I am developing a kanban board, in which I have tasks with a sortable function, I have a bug and it is that when moving an item to a new column if it is placed on another item, they overlap and the item is deformed.

It seems that I noticed that the problem lies in the style property :

const style = {
    transition,
    transform: CSS.Transform.toString(transform),
}


I tried modifying the property:

const style = useMemo(() => {
return {
    ...(isDragging ? { transform: CSS.Translate.toString(transform) } : null),
    transition,
}

}, [isDragging, transform, transition])

The deformation problem is solved, but the display area continues to overlap with other items,

I'm not sure if the real problem is in the style property of the item or lies in my SortableContext or in the new set task array

Please if anyone knows a solution I would be happy to know it

[mireiaespuga]

Do this and it should allow the movement of the item while maintaining scale

 const style = {
    transform: CSS.Transform.toString(
      transform
        ? {
            ...transform,
            scaleX: 1,
            scaleY: 1,
          }
        : null,
    ),
    transition,
  }
  

[Ivnoff1]

@mireiaespuga
Thanks, I tried it and it worked, the elements are no longer deformed, it's great!

only now I have a new bug that is somewhat interesting, and that is that when I change an item to a new column, the green preview item overlaps with other items,

I think the problem no longer comes from the style property, but I can't find the real problem.

if you can help me that would be amazing