Nested Swapy?

[AgainstLightning]

I have a component rendering a list of swapy elements, which function as expected. When I make one of those swappable children a sub-list, of which I also want swappable, this all seems to break down.

Are there any known issues with or examples of a nested Swapy design? A base example structure is below, where I can swap the headers (and any children along with it) and then within the header, the list of subheaders are swappable.

- Header 1 (Swappable with any headers, moving all subheaders with it int he swap)
  - Subheader 1 (Swappable with any subheaders it's related to, in this case the 3 that belong to this header)
  - Subheader 2  
  - Subheader 3
- Header 2
  - Subheader 1
  - Subheader 2  
  - Subheader 3
- Header 3
  - Subheader 1
  - Subheader 2  
  - Subheader 3

Is this possible? I have failed in my attempts, using handles, trying dynamic and non-dynamic, etc.

Thank you!

[jhonson-tian]

I am able to do this by mounting the subheader list after header list mounted

const swapy = React.useRef<Swapy | null>(null);
const container = React.useRef<HTMLDivElement | null>(null);
const [loaded, setLoaded] = React.useState(false);

React.useEffect(() => {
  if (container.current) {
    swapy.current = createSwapy(container.current);
    setLoaded(true);
  }

  return () => {
    swapy.current?.destroy();
  };
}, []);

then

<div data-swapy-slot="2"> <div data-swapy-item="2">{loaded && <Subheader />}</div> </div>