How to rotate a droppable element?

[kingsurf]

I have a component which is droppable, inside this droppable element I have a draggable and droppable element. If I rotate this element by lets say 90deg, then attempt to drop another draggable element on top of it, the library doesn't understand the rotation and will instead allow me to drop over the "invisible non rotated component" This is the droppable and draggable component

function BoxSection(props) {
  const { id, className, section, style, selected, fixed, ratio, boxes, furnitures, tableClasses, assignment, removeFromSection, moveTable } = props;

  const showChairPositions = useAppSelector((state) => state.planner.showChairPositions);

  const customStyle = {};
  if (selected.some((s) => s.key === id)) {
    Object.assign(customStyle, { backgroundColor: "purple", color: "white" });
  }
  if (section.alternate) {
    const borderWidth = BORDER_RATIO * ratio;
    Object.assign(customStyle, { border: `${borderWidth}px solid red`, zIndex: 0 });
  }

  const dispatch = useTypedDispatch();
  const {
    attributes,
    listeners,
    transform,
    setNodeRef: setDraggableRef,
  } = useDraggable({
    id,
    data: {
      type: [ItemTypes.SECTION],
      box: section,
    },
  });

  const { setNodeRef: setDroppableRef } = useDroppable({ id, data: { supports: [ItemTypes.BOX], rotation: section.rotate || 0 } });

  const selectBox1 = (e) => (fixed ? null : dispatch(selectBox(e, id)));

  const style1 = {
    ...style,
    transform: transform ? `translate3d(${transform.x}px, ${transform.y}px, 0) rotate(${section.rotate || 0}deg)` : `rotate(${section.rotate || 0}deg)`, // Apply rotation if transform is not yet applied
  };

  return (
    <div
      ref={(node) => {
        setDraggableRef(node);
        setDroppableRef(node);
      }}
      onClick={selectBox1}
      style={{ ...style1, ...customStyle, width: section.length * ratio, height: section.depth * ratio }}
      {...listeners}
      {...attributes}
    >
      <div className={className} style={{ ...sectionStyle, ...customStyle, width: section.length * ratio, height: section.depth * ratio } as CSSProperties}>
        <SectionTables sectionId={id} boxes={boxes} assignment={assignment} tableClasses={tableClasses} section={section} ratio={ratio} furnitures={furnitures} fixed={fixed} showChairPositions={showChairPositions} removeFromSection={removeFromSection} moveTable={moveTable} />
      </div>
    </div>
  );
}

export default BoxSection;

I am using the "pointerWithin" collisionDetection built in algorithm. This is the DndContext the above lies within (just showing the important parts)

  return (
    <DndContext /* onDragStart={handleDragStart}*/ onDragEnd={handleDragEnd} sensors={sensors} collisionDetection={pointerWithin}>
      <DroppableContainer id="droppable-container" areaStyle={areaStyle}>
        {fitleredData.map((box: Table & Section & BoxType) => {
          return <DragItem key={box._key} box={box} />;
        })}
      </DroppableContainer>
    </DndContext>
  );```