Make draggable only a part of the component?

[RafaelCENG]

Hello everyone is it possible to make my component draggable only from the iconButton at the left? As shown in the video I managed to make it clickable so now I can expand it. I want to make it draggable only from the left side and not the whole box.

Screen.Recording.2024-01-25.at.10.19.54.AM.mov

My approach is similar to the form builder discussion.

Here is a part of my Canvas File

export function Field(props) {
  const { field, overlay, ...rest } = props;
  const { type } = field;

  const Component = getRenderer(type);

  return (
    <Box sx={{ width: "100%", opacity: overlay ? 0.5 : 1 }}>
      <Component {...rest} />
    </Box>
  );
}

function SortableField(props) {
  const { id, index, field } = props;

  const { attributes, listeners, setNodeRef, transform, transition } =
    useSortable({
      id,
      data: {
        index,
        id,
        field,
      },
    });

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

  return (
    <Box ref={setNodeRef} style={style} {...attributes} {...listeners}>
      <Field field={field} />
    </Box>
  );
}

And here are my fields

export const fields = [
  {
    type: "warmup",
    title: "Warmup",
    image: <img src={warmupStep} alt="warm-up" />,
  },
];

// These define how we render the field
export const renderers = {
  warmup: () => <StepComponent stepTitle="Warmup" />,

Similar code with Form Builder