How to use the react-reconciler function in react-reconciler

onMeshPicked?: (mesh: AbstractMesh, scene: BabylonJSScene) => void
  onScenePointerDown?: (evt: PointerInfo, scene: BabylonJSScene) => void
  onScenePointerUp?: (evt: PointerInfo, scene: BabylonJSScene) => void
  onScenePointerMove?: (evt: PointerInfo, scene: BabylonJSScene) => void
  onSceneMount?: (sceneEventArgs: SceneEventArgs) => void
  sceneOptions?: SceneOptions
} & FiberSceneProps

class Scene extends React.Component {
  private _scene: Nullable = null;
  private _pointerDownObservable: Nullable> = null;
  private _pointerUpObservable: Nullable> = null;
  private _pointerMoveObservable: Nullable> = null;

  private _fiberRoot?: ReactReconciler.FiberRoot;
  private _reactReconcilerBabylonJs = ReactReconciler(ReactBabylonJSHostConfig)
  private _propsHandler = new FiberScenePropsHandler();

  componentDidMount() {
    const { babylonJSContext } = this.props
    
    if (!babylonJSContext) {
      // we could try to create one here with existing props (ie: backwards compat?)
      console.error('You are creating a scene without an Engine.  \'SceneOnly\' will only work as a child of Engine, use \'Scene\' otherwise.')
      return
    }
      
    const { engine /*, canvas */ } = babylonJSContext;

    this._scene = new BabylonJSScene(engine!, this.props.sceneOptions)
    const updates : UpdatePayload = this._propsHandler.getPropertyUpdates(this._scene, {}, this.props as any, this._scene)
    if (updates !== null) {

universes[instance.root],
        instance.render()
      );
    },

    commitMount(instance, updatePayload, type, oldProps, newProps) {
      // noop
    },

    commitTextUpdate(textInstance, oldText, newText) {
      textInstance.children = newText;
    }
  }
};

const ReactDMX = Reconciler(ReconcilerConfig);

export default ReactDMX;

}
  if (props.onMouseMove !== prevProps.onMouseMove) {
    instance.onMouseMove = props.onMouseMove
  }
  if (props.onMouseUp !== prevProps.onMouseUp) {
    instance.onMouseUp = props.onMouseUp
  }
  if (props.onKeyUp !== prevProps.onKeyUp) {
    instance.onKeyUp = props.onKeyUp
  }
  if (props.onKeyDown !== prevProps.onKeyDown) {
    instance.onKeyDown = props.onKeyDown
  }
}

const PaperRenderer = Reconciler({
  appendInitialChild(parentInstance, child) {
    if (typeof child === 'string') {
      // Noop for string children of Text (eg )
      invariant(false, 'Text children should already be flattened.')
    } else if (parentInstance instanceof Group && child instanceof Item) {
      child.addTo(parentInstance)
    }
  },

  createInstance(type, props, paperScope) {
    const { children, ...paperProps } = props
    let instance = {}

    switch (type) {
      case TYPES.TOOL:
        instance = new Tool(paperProps)

now: now,
  prepareForCommit: prepareForCommit,
  prepareUpdate: prepareUpdate,
  removeChild: removeChild,
  removeChildFromContainer: removeChild,
  resetAfterCommit: resetAfterCommit,
  resetTextContent: resetTextContent,
  scheduleDeferredCallback: scheduleDeferredCallback,
  schedulePassiveEffects: scheduleDeferredCallback,
  shouldDeprioritizeSubtree: shouldDeprioritizeSubtree,
  shouldSetTextContent: shouldSetTextContent,
  supportsMutation: supportsMutation,
};

// React Pixi Fiber renderer is primary if used without React DOM
export const ReactPixiFiberAsPrimaryRenderer = ReactFiberReconciler({ ...hostConfig, isPrimaryRenderer: true });

// React Pixi Fiber renderer is secondary to React DOM renderer if used together
export const ReactPixiFiberAsSecondaryRenderer = ReactFiberReconciler({ ...hostConfig, isPrimaryRenderer: false });

// If use ReactDOM to render, try use ReactDOM.unstable_batchedUpdates
export const unstable_batchedUpdates = ReactPixiFiberAsPrimaryRenderer.batchedUpdates;

export default ReactPixiFiberAsSecondaryRenderer;

},
    removeChild(parentInstance, child) {
        parentInstance.removeChild(child);
    },
    removeChildFromContainer(parentInstance, child) {
        parentInstance.removeChild(child);
    },

    // These are todo and not well understood on the server
    hideInstance() {},
    hideTextInstance() {},
    unhideInstance() {},
    unhideTextInstance() {}
};

const SSRRenderer = Reconciler(hostConfig);

function ReactRoot({ staticMarkup = false } = {}) {
    const rootType = staticMarkup ? ROOT_STATIC_TYPE : ROOT_TYPE;
    const ssrTreeRootNode = new SSRTreeNode(rootType);
    this._internalTreeRoot = ssrTreeRootNode;
    const root = SSRRenderer.createContainer(ssrTreeRootNode, true);
    this._internalRoot = root;
    this._staticMarkup = staticMarkup;
}
ReactRoot.prototype.render = function(children) {
    const root = this._internalRoot;
    const work = new ReactWork(this._internalTreeRoot, {
        staticMarkup: this._staticMarkup
    });
    SSRRenderer.updateContainer(children, root, null, work._onCommit);
    return work;

import {NodeElement}                                           from './NodeElement';
import {NodeText}                                              from './NodeText';
import {NodeTree}                                              from './NodeTree';
import {Node}                                                  from './Node';
import {TermInput}                                             from './TermInput';
import {TermOutput}                                            from './TermOutput';
import {TermRenderer}                                          from './TermRenderer';
import {Props}                                                 from './types';

// Reexport the Div component
export * from './Div';

type HostContext = {
};

const Reconciler = makeReconciler({
  useSyncScheduling: true,

  now() {
    return Date.now;
  },

  getRootHostContext(): HostContext {
    return {};
  },

  getChildHostContext(): HostContext {
    return {};
  },

  createInstance(type: string, props: Props, container: NodeTree, hostContext: HostContext) {
    return new NodeElement(container.env, props);

function render(
  element: JSX.Element,
  renderer: Renderer,
  { width, height }: { width: number; height: number }
) {
  const container = new HostView();

  const reconciler = Reconciler(
    createReconcilerConfig(container, () => {
      container.setLayoutStyle({ width, height });
      const layout = container.layoutNode.computeLayout({
        width,
        height,
      });
      container.notifyOnLayoutHook(layout, { offsetX: 0, offsetY: 0 });
      return renderer.renderDiff(container, layout);
    })
  );
  const node = reconciler.createContainer(container, false, false);
  reconciler.updateContainer(element, node, null, () => undefined);

  return container;
}

import Reconciler from 'react-reconciler';

const emptyObject = {};

import { createElement, getHostContextNode } from '../utils/createElement';

export const WorkflowRenderer = Reconciler({
  createInstance(type, props) {
    return createElement(type, props);
  },

  createTextInstance(text) {
    return { text };
  },

  finalizeInitialChildren() {
    return false;
  },

  getPublicInstance(inst) {
    return inst;
  },

width,
    height,
    maxRenders,
  }: { width?: number; height?: number; maxRenders?: number } = {}
): {
  snapshot?: string;
  start: () => Iterable>;
  stop: () => void;
} {
  let currentSnapshot = '';
  const asyncIterator = new AsyncIterator(maxRenders);
  const renderer = new Renderer();
  const container = new View();

  container.setLayoutStyle({ width: '100%', height: '100%' });
  const reconciler = Reconciler(
    createReconcilerConfig(container, () => {
      const layout = container.layoutNode.computeLayout({
        width: width || null,
        height: height || null,
      });
      container.notifyOnLayoutHook(layout, { offsetX: 0, offsetY: 0 });
      currentSnapshot = renderer.renderToString(container, layout);

      asyncIterator.nextValue(currentSnapshot);
    })
  );
  const node = reconciler.createContainer(container, false, false);
  reconciler.updateContainer(element, node, null, () => undefined);

  return {
    get snapshot() {