How to use the callbag-basics.map function in callbag-basics

> = component =>
    pipe(
        component.observe(),
        map(({ prop }) => ({
            newProp: `${prop} world`
        })),
        map(asProps)
    )

function counters$(realtime, next) {
    return pipe(
        fromObs(channelToObs(realtime, 'chat:counters')),
        map(msg => msg.params),
        map(counters => ({
            ...counters,
            isOnline: new window.Map(counters.peers || []),
        })),
        subscribe({ next })
    );
}

const aperture = ({ observe }) =>
    pipe(
        observe('username'),
        filter(Boolean),
        debounce(1000),
        map(username =>
            fromPromise(
                fetch(`https://api.github.com/users/${username}`).then(res =>
                    res.json()
                )
            )
        ),
        flatten,
        map(payload => ({ type: 'USER_DATA_RECEIVE', payload }))
    )

.add('cb-basics', function (deferred) {
        runners.runCallbag(deferred,
            callbag.pipe(
                callbag.combine(cbag1, cbag2, cbag3),
                callbag.map(add3Arr),
                callbag.filter(even)
            )
        );
    }, options)
    .add('xstream', function (deferred) {

addFilter( 'carbon-fields.conditional-display-post-format.classic', 'carbon-fields/metaboxes', () => {
	const node = document.querySelector( 'div#post-formats-select' );

	if ( ! node ) {
		return of( INITIAL_STATE );
	}

	return pipe(
		fromDelegatedEvent( node, 'input.post-format', 'change' ),
		map( ( { target } ) => getPostFormatFromRadioInput( target ) ),
		startWith( getPostFormatFromRadioInput( node.querySelector( 'input.post-format:checked' ) ) )
	);
} );