Building a sidebar with React dnd-kit

I've been working on a note-taking application, and part of that involved building a sidebar with drag-and-drop support. The requirements were fairly straightforward: Notes should be nestable (drag one into another) A pinned section at the top Drag interactions shouldn't interfere with normal clicks for file selection After looking around, I went with dnd-kit since it's actively maintained and widely recommended. While the official documentation is good, there were a few gaps I had to figure out while integrating it into a real project, especially around TypeScript and some of the interaction patterns. This post covers the parts that weren't immediately obvious. Here's a reference to the sidebar so the rest of the article has some context: Choosing the right package First things first, the version. I'm using @dnd-kit/[email protected], which is the newer React-specific package and not @dnd-kit/core. Most tutorials, Stack Overflow answers, and examples online are still based on the older pack