Drag not working for nested <Element />

[pcjaarvis]

I have two components below, The AssessmentComp contains the AssessmentOptionsContainer as a child, I can drag the parent component fine, but when i try to drag the inner component (AssessmentOptionsContainer), it does not let me drag,

import { Element, useNode } from "@craftjs/core";
import AssessmentOptionsContainer from "./AssessmentOptionsContainer.jsx";

function AssessmentComp() {
  const {
    connectors: { connect, drag },
  } = useNode();

  return (
    <div ref={connect} className="z-10 border border-blue-600 p-4">
      <p ref={drag} className="border bg-yellow-300 p-2 cursor-pointer">
        Drag AssessmentComp
      </p>

      {/* Ensuring AssessmentOptionsContainer is properly nested */}
      <Element is={AssessmentOptionsContainer} canvas id="options-cont" />
    </div>
  );
}

AssessmentComp.craft = {
  displayName: "AssessmentComp",
  isCanvas: true,
  rules: {
    canMoveIn: () => true,
    canDrag: () => true,
    canMoveOut: () => true,
    canDrop: () => true,
  },
  related: {
    AssessmentOptionsContainer,
  },
};

export default AssessmentComp;

my inner Element:

function AssessmentOptionsContainer() {
  const {
    connectors: { connect, drag },
  } = useNode();

  return (
    <div ref={connect} className="border border-green-600 no-select p-4">
      <p ref={drag} className="border bg-red-300 p-2 cursor-pointer">
        Drag AssessmentOptionsContainer
      </p>
      <p>This is the content inside the container.</p>
    </div>
  );
}

not able to drag inner Element

AssessmentOptionsContainer.craft = {
  displayName: "AssessmentOptionsContainer",
  isCanvas: true, // Marked as canvas to allow children inside
  rules: {
    canMoveIn: () => true,
    canDrag: () => true,
    canMoveOut: () => true,
    canDrop: () => true,
  },
};

export default AssessmentOptionsContainer;