Slot components re-render on hover

[FedericoBonel]

Description

If we use slots to nest components, whenever a slot or its nested content is hovered, the entire tree re-renders.
This happens because the component’s render function is not memoized in DropZoneChild (both in the definition here and the invocation here).
As a result, whenever DropZoneChild or DraggableComponent re-renders, the render function does too.
In this case, the component that re-renders on hover is DraggableComponent.

Environment

• Puck version: 0.20.2

Steps to reproduce

1. Render the Puck editor with a config that uses slots:

const config = {
  components: {
    Slot: {
      fields: { items: { type: "slot" } },
      render: ({ items: Items }) => {
        console.log("Re-rendering Slot");
        return <Items />;
      }
    },
    Heading: {
      fields: { title: { type: "text" } },
      defaultProps: { title: "Heading" },
      render: ({ title }) => {
        console.log("Re-rendering Heading");
        return <h1>{title}</h1>;
      }
    }
  }
};

2. Navigate to the editor.
3. Open the devtools console.
4. Drag and drop a Slot.
5. Drag and drop two Heading components inside the Slot.
6. Hover over the Slot component.
7. Watch the console.

What happens

Multiple logs from both the Slot and Heading components appear.

What I expect to happen

No logs should appear for either the Slot or the Heading when hovering over them.

Additional Media

https://github.com/user-attachments/assets/533e9122-88a8-4ea6-8692-3d3641d62ea4