Dropzone not working

[Rkaede]

Hi there,

First off, Puck is an incredible library. It's really well thought out and has a beautiful API. Thank you so much for putting this out into the world. 🙏

I'm having issues using the DropZone component with our in-house component library. Here's an example codesandbox of the setup:

https://codesandbox.io/p/sandbox/4fpn9f?file=%2Fsrc%2FEditor.tsx

We're trying to nest a two levels deep using the DropZone component: ComponentA > ComponentB > ComponentC.

This works great in the sandbox above. However, when we use our in-house "ComponentB" component, we can no longer drop a "ComponentC" onto it.

import { ComponentB } from '@internal/components';

const config = {
  components: {
    ComponentB: {
      fields: {},
      defaultProps: {},
      render: () => {
        return (
          <ComponentB> // if we change this to a div it works fine.
            <DropZone zone="component-b" />
          </ComponentB>
        );
      },
    },
    //... other components
  },
};

Are there any common pitfalls that we need to check for in our ComponentB?