How to move child element to other parent with drag and drop in React-sortablejs Library?

Question

I want move element child element to in other parent with drag event. My code is like below.

but I can't not move child to outside current parent by drag with that code. .. please..

import { ReactSortable } from "react-sortablejs";
import { FieldArray } from "formik";

// ...

<FieldArray name="parents">
{({ push, remove, move }) => (
  <ReactSortable
    list={values.parents}
    setList={newParents => {
      setFieldValue("parents", newParents);
    }}
  >
    {values.parents.map((parent, parentIndex) => (
      <div key={parent.id}>
        {parent.name}
        <ReactSortable
          list={parent.children}
          setList={newChildren => {
            const newParents = [...values.parents];
            newParents[parentIndex].children = newChildren;
            setFieldValue("parents", newParents);
          }}
        >
          {parent.children.map((child, childIndex) => (
            <div key={child.id}>
              {child.name}
            </div>
          ))}
        </ReactSortable>
      </div>
    ))}
  </ReactSortable>
)}
</FieldArray>