Preserve the size of dragged item while dragging it over another item in react

• You can leverage the useTransform hook to customize the appearance of sortable items during drag operations. As an example, you can update your SortableItem.jsx file like this:

import React from "react";
import Card from "react-bootstrap/Card";
import { useSortable, useTransform } from "@dnd-kit/sortable";

export function SortableItem(props) {
  const {
    attributes,
    listeners,
    setNodeRef,
    transform,
    transition,
    isDragging,
  } = useSortable({ id: props.id });

  const style = useTransform(
    transform,
    (transform) => {
      if (isDragging) {
        return {
          ...transform,
          width: "auto",
          height: "auto",
          margin: "1rem",
          boxShadow: "0 0 10px rgba(0,0,0,0.2)",
        };
      }
      return {
        ...transform,
        transition,
      };
    },
    [isDragging]
  );

  return (
    

      {props.id}
    
  );
}

• Alternatively, an individual with the GitHub handle @clauderic suggested a resolution for this issue in this GitHub discussion. According to their explanation, the stretching of items occurs because of the use of CSS.Transform.toString(). Instead, it's recommended to use CSS.Translate.toString() if you want to prevent the scale transformation from being applied.

• As another option, you can ensure that in your styles, the value of transform is set to CSS.Translate.toString(transform) instead of CSS.Transform.toString(transform), as suggested in this GitHub discussion.