Do not destroy children which are not created by react

Description

Currently, a code to remove a component from a tree looks like this:

  if ((_child$children = child.children) !== null && _child$children !== void 0 && _child$children.length) {

    _toConsumableArray(child.children).forEach(function (c) {
      _removeChild(child, c);
    });
  }

  parent.removeChild(child);
  child.destroy();

It makes an issue with pixi components, which manages children on its own. See issue: https://github.com/pixijs/spine/issues/389

Pixi spine makes children on its own and destroy them in destroy method. Because of it, there is no way to manage component like this in react-pixi, because react-pixi will call destroy for each child and call destroy on the spine component.

I think, there should be a way to manage situation like this.

Steps to reproduce

1. Make component like this:

export const SpineComponent = PixiComponent<{ data: ISkeletonData }, OrigSpine>('Spine', {
    create: (props) => {
        const s = new Spine(props.data);

        s.state.setAnimation(0, 'idle_1', true);

        return s;
    },
    didMount: (instance, parent) => {
    },
    willUnmount: (instance, parent) => {
    },
    applyProps: (instance, oldProps, newProps) => {
        return true;
    },
});

1. Use the component
2. Destroy component from the tree

Additional info

"pixi.js": "6.0.4",
"pixi-spine": "^3.0.3",
"react": "^17.0.2",
"@inlet/react-pixi": "^6.5.2",
"react-dom": "^17.0.2",

[adsko]

@inlet It makes sense to group it in object.

[inlet]

Hopefully this fix helps you