Insert plugin defined in parent component is also active for nested components when drag

[NebojsaStojakovic]

I am having issue with insert plugin. Insert plugin is defined in the App.tsx for swaping sections with useDragAndDrop. Inside each section i have lists of items that also can be dragged and moved to each section. The problem occurs when i try to move item from one section into another, when that is the case a see insert line just like i am dragging section. Insert line is not showed only when i also have some plugin inside child useDragAndDrop for each section.

Screen.Recording.2025-05-12.at.10.10.31.mov

App.tsx:

const App = () => {
  const [sectionRef, sections] = useDragAndDrop<HTMLDivElement, Section>(
    sortedSidebarSections,
    {
      plugins: [
        insert({
          insertPoint: () => {
            const div = document.createElement("div");
            div.classList.add("testSpan");
            return div;
          },
        }),
      ],
      group: "todoList",
    }
  );

  return (
    <div
      className="container "
      ref={sectionRef}
    >
      {sections.map((section) => {
        return (
          <SidebarSection
            key={section.id}
            sectionId={section.id}
            channelsList={section.channels}
          />
        );
      })}
    </div>
  );
};

export default App;

SidebarSection.tsx:

const SidebarSection = ({
  sectionId,
  channelsList,
}: SidebarSectionPropsNew) => {
  return (
    <div className={`sidebar-section ${sectionId}`} key={sectionId}>
      <div className="section-title">{sectionId}</div>
      <SidebarSectionContent
        sectionId={sectionId}
        channelsList={channelsList}
      />
    </div>
  );
};

export default SidebarSection;

SidebarSectionContent.tsx:

const SidebarSectionContent = ({
  sectionId,
  channelsList,
}: SidebarSectionContentProps) => {

  const [channelRef, channels] = useDragAndDrop<HTMLDivElement, any>(
    channelsList,
    {
      group: "channels",

      plugins: [
        dropOrSwap({
          shouldSwap(data) {
            return false;
          },
        }),
      ],
    }
  );

  return (
    <div ref={channelRef} className={`items channels-${sectionId}`}>
      {channels?.map((channel) => (
        <div key={channel.id}>{channel.name}</div>
      ))}
    </div>
  );
};

export default SidebarSectionContent;