How to use the overmind.map function in overmind

import { action, map, filter, Operator } from 'overmind'

export const getTargetValue: Operator<
  React.ChangeEvent,
  string
> = map(({ value: event }) => event.currentTarget.value)

export const setQuery: Operator = action(({ value: query, state }) => {
  state.query = query
  state.showSearchResult = query.length > 2
  state.isLoadingSearchResult = query.length > 2
})

export const isValidQuery: Operator = filter(
  ({ value: query }) => query.length >= 3
)

export const query: Operator = action(async ({ state, effects }) => {
  state.searchResult = await effects.request(
    '/backend/search?query=' + state.query
  )
  state.isLoadingSearchResult = false

when,
  run,
  wait,
  fork,
  debounce,
  filter,
  forEach,
} from 'overmind'
import { Todo } from './state'

type ChangeEvent = React.ChangeEvent

let nextTodoId = 0

export const changeNewTodoTitle: Operator = pipe(
  map(({ value }) => value.target.value),
  mutate(({ state, value }) => (state.newTodoTitle = value)),
  map(() => ['foo', 'bar', 'baz']),
  forEach(run(() => {})),
  filter(() => true),
  debounce(200)
)

/*
export const changeNewTodoTitle: Action = ({
  value: event,
  state,
}) => {
  state.newTodoTitle = event.target.value
}
*/

wait,
  fork,
  debounce,
  filter,
  forEach,
} from 'overmind'
import { Todo } from './state'

type ChangeEvent = React.ChangeEvent

let nextTodoId = 0

export const changeNewTodoTitle: Operator = pipe(
  map(({ value }) => value.target.value),
  mutate(({ state, value }) => (state.newTodoTitle = value)),
  map(() => ['foo', 'bar', 'baz']),
  forEach(run(() => {})),
  filter(() => true),
  debounce(200)
)

/*
export const changeNewTodoTitle: Action = ({
  value: event,
  state,
}) => {
  state.newTodoTitle = event.target.value
}
*/

export const addTodo: Action = ({ state }) => {
  state.todos.unshift({