How to use the @cycle/state.makeCollection function in @cycle/state

export function Collection (sources) {
  const indexKey = sources.props.indexKey || 'index'
  const idKey = sources.props.idKey || 'id'

  const innerFragmentKey = sources.key || uniqueId()

  const List = makeCollection({
    item: CollectionItem(idKey),

    // I'm not sure what it's for. From cycle's source, it seems like that it
    // serves as an isolation base, but we already have isolation on the items...
    // itemKey: (childState, index) => String(index),

    itemScope: key => key,
    collectSinks: instances => {
      return ({
        react: instances
          .pickCombine('react')
          .map(itemVdoms => pragma(
            Fragment,
            { key: innerFragmentKey },
            itemVdoms.map((vdom, idx) => ({
              ...vdom,

export function Collection (sources) {
  const outerStateName = sources.props.outerstate === undefined
    ? 'outerState'
    : sources.props.outerstate

  const channel = sources.props.channel || 'state'

  const forLens = !sources.props.for
    ? identityLens
    : getPathLens(sources.props.for)

  const collectionCmp = makeCollection({
    item: CollectionItem,

    // It might be relevant, when a collection item sink calculates something
    // based on the initial value.
    // itemKey: (childState, index) => String(index),

    channel,
    itemScope: sources.props.itemscope || (key => key),
    collectSinks: collectSinksBasedOnSource({
      ...sources,
      // Value doesn't matter here, just add the outerstate key for pickMerge
      ...outerStateName && { [outerStateName]: 1 }
    })
  })

  // This part wraps the item states in an object which provides access to all