How to use the @cycle/isolate function in @cycle/isolate

const instances$ = state$.fold((acc: InternalInstances, nextState: Array | any) => {
      const dict = acc.dict;
      if (Array.isArray(nextState)) {
        const nextInstArray = Array(nextState.length) as Array;
        const nextKeys = new Set();
        // add
        for (let i = 0, n = nextState.length; i < n; ++i) {
          const key = `${itemKey ? itemKey(nextState[i], i) : i}`;
          nextKeys.add(key);
          if (!dict.has(key)) {
            const onionScope = itemKey ? instanceLens(itemKey, key) : `${i}`;
            const otherScopes = itemScope(key);
            const scopes = typeof otherScopes === 'string' ?
              {'*': otherScopes, [name]: onionScope}  :
              {...otherScopes, [name]: onionScope};
            const sinks = isolate(itemComp, scopes)(sources);
            dict.set(key, sinks);
            nextInstArray[i] = sinks;
          } else {
            nextInstArray[i] = dict.get(key) as any;
          }
          nextInstArray[i]._key = key;
        }
        // remove
        dict.forEach((_, key) => {
          if (!nextKeys.has(key)) {
            dict.delete(key);
          }
        });
        nextKeys.clear();
        return {dict: dict, arr: nextInstArray};
      } else {

const navbar = Navbar({
        DOM,
        HTTP,
        storage,
        fractal,
        glue,
        props: { authToken$ },
    });
    const feed = isolate(Feed, { fractal: feedLens() })({
        DOM,
        HTTP,
        fractal,
        glue,
        props: { authToken$, router$ },
    });
    const post = isolate(Post, { fractal: postLens() })({
        DOM,
        HTTP,
        fractal,
        glue,
        props: { authToken$, router$ },
    });
    const publisher = isolate(Publisher, { fractal: publisherLens() })({
        DOM,
        HTTP,
        storage,
        fractal,
        glue,
        props: { authToken$, router$ },
    });

    // Compute merged vdom trees.

const defsWithComps = defs.map(def => {
    const comp = isolate(def.componentFn)({
      ...sources,
      router: sources.router.path(def.urlPath) // scoped router
    });
    return { ...def, comp };
  });

export function EndMarker(sources) {
  return isolate(OriginalEndMarker)(sources);
}

export default ({
    DOM, globalEvents, visible$,
    pla$ = O.empty(), json$ = O.empty(),
}) => {
  const {isolateSource, isolateSink} = DOM;

  const actions = intent({DOM: isolateSource(DOM, 'modalBody')});
  const state$ = model(pla$, json$);
  const modal = isolate(ModalBox, 'modal')({
    DOM,
    globalEvents,
    props$: O.merge([
      actions.finish$.map(() => false),
      visible$,
    ]).map((v) => ({visible: v})),
    content$: isolateSink(view(state$), 'modalBody'),
  });

  return {
    DOM: modal.DOM.map(wrapInDiv),
    selectAll: actions.selectAll$,
  };
};

export default function main(sources: Sources): Sinks {
  const isolatedCentral = isolate(central, {
    onion: centralLens,
    "*": "central",
  }) as typeof main;

  const isolatedDetails = isolate(details, {
    onion: detailsLens,
    "*": "details",
  }) as typeof main;

  const isolatedAddition = isolate(addition, "addition") as typeof main;

  const centralSinks = isolatedCentral(sources);
  const additionSinks = isolatedAddition(sources);
  const detailsSinks = isolatedDetails(sources);

  const vdom$ = xs.merge(

export default sources => isolate(ComponentRouter)(sources)

return function (sources) {
    return component(
      pragma(
        Fragment,
        null,
        pragma(cycleIsolate(Cmp, lens), null, ...castArray(sources.props.children))
      ),
      null,
      sources
    )
  }
}

export default function TodoApp(sources: Sources): Sinks {
  const listSinks: Sinks = isolate(List, {onion: listLens})(sources);
  const counterSinks: Sinks = isolate(Counter, {onion: 'counter'})(sources);
  const actions = intent(sources.DOM);
  const parentReducer$ = model(actions);
  const listReducer$ = listSinks.onion;
  const counterReducer$ = counterSinks.onion;
  const reducer$ = xs.merge(
    parentReducer$,
    listReducer$,
    counterReducer$,
  );
  const vdom$ = view(listSinks.DOM, counterSinks.DOM);

  return {
    DOM: vdom$,
    onion: reducer$,
  }

}),
    content$: O.just(help()),
    keydown,
  });

  const inputSpinner = isolate(Spinner, 'inputSpinner')({
    DOM,
    props$: O.just({
      min: 0,
      max: 15,
      label: 'Inputs',
    }),
    value$: O.just(1),
  });

  const outputSpinner = isolate(Spinner, 'outputSpinner')({
    DOM,
    props$: O.just({
      min: 1,
      max: 8,
      label: 'Outputs',
    }),
    value$: O.just(1),
  });

  const modeSwitch = isolate(Switch, 'modeSwitch')({
    DOM,
    props$: O.just({
      onLabel: 'Yes',
      offLabel: 'No',
    }),
    enabled$: O.just(true),