Drag-and-Drop Elements from Side Panel to Container

[Samaanl]

I'm exploring the dnd-kit library for implementing drag-and-drop functionality in my React application. Here's the use case I want to implement:

My application layout includes:

A left panel (20% of the screen width) containing draggable elements.
A right container (80% of the screen width), which serves as a droppable area.
I want users to:

Drag elements from the left panel.
Drop them anywhere inside the right container.
Customize or position them freely within the right container after dropping.
Additionally, I'm planning to integrate Rete.js for node-based visualization in the same application.

Questions:

Does dnd-kit support this type of drag-and-drop setup (dragging elements between two distinct areas)?
Are there any known compatibility concerns or best practices for integrating dnd-kit with Rete.js?
If you could provide guidance, relevant examples, or point me to any documentation/tutorials that align with this use case, it would be immensely helpful.

Thank you for creating such a fantastic library!