Reparentable.jsx

import React, {useState} from 'react';
import {Reparentable, sendReparentableChild} from 'react-reparenting';
import {Child} from './Child';

const App = () => {
  // The Parents.
  const [parents, setParents] = useState({
    A: ['c1', 'c2'],
    B: ['c3'],
  });

  // The Child components.
  const children = {
    parentA: parents.A.map((key) => <Child key={key} />),
    parentB: parents.B.map((key) => <Child key={key} />),
  };

  return (
    <main>
      {/* Parent A */}
      <div className="parent">
        <Reparentable id="parentA">{children.parentA}</Reparentable>
      </div>
      {/* Parent B */}
      <div className="parent">
        <Reparentable id="parentB">{children.parentB}</Reparentable>
      </div>
    </main>
  );
};