Editing not working, how to solve?

Question

React

I want to add an editing function to the todo app, but when I change a note, undefined comes up.
Here is the action creator:

export const changeTodo = (id, text) => {
  debugger
  return {
    type: CHANGE_TODO,
    id,
    text
  }
}

Here is the Reducer:

case CHANGE_TODO: 
    debugger
      return {
        ...state,
        todos: state.todos.map(todo => todo.id === action.id
          ? { ...todo, id: todo.id, text: action.text, completed: todo.completed }
          : todo
        )
      }

The problem is that I don't pass the parameter (which will contain the value) to the Todo component, and if I use args, then the interpreter swears.
Please tell me how to solve this problem.
All applications on github: GitHub

const TodoList = ({removeTodo, toggleTodo, changeTodo, todos}) => {
  return (
    <StyledTodoList>
      <Ul>
        {
          todos.map(todo => 
            <Todo
            key={todo.id}
            toggleHandler={() => toggleTodo(todo.id)}
            removeHandler={() => removeTodo(todo.id)}
            сhangeHandler={() => changeTodo(todo.id)}
            // для для изменения заметки нужно добавит еще один параметр, который будет новым значением
            {...todo}
            />
          )
        }
      </Ul>
      <AddButton>
        <NavLink 
        to='addTodo'
        >+</NavLink>
      </AddButton>
    </StyledTodoList>
  )
}

And Todo:

const Todo = props => {

  const { id, text, toggleHandler, removeHandler, сhangeHandler} = props
  const [isEditingStarted, setEditValue] = useState(false)
  const [inputValue, setInputValue] = useState('')

  const submitHandler = event => {
    event.preventDefault()
    сhangeHandler(id, inputValue)
    setInputValue('')
  }

  return (
    <StyledTodo {...props}>
      <StyledCheckBox
        type='checkbox'
        onClick={toggleHandler}
      />
      {isEditingStarted ? 
      <form onSubmit={submitHandler}>
        <Input 
        defaultValue={text}
        onChange={e => setInputValue(e.target.value)}
        onKeyDown = {e => e.keyCode === 27 ? setEditValue(false) : ''}
        /> 
      </form> :
      text
      }
      <div>
        <Span 
         onClick={() => setEditValue(true)}
         >
          <img 
          src={changeIcon} 
          alt='Ред'
          />
        </Span>
        <Span
          onClick={removeHandler}
        >
          <img 
          src={closeIcon} 
          alt='Закрыть'
          />
        </Span>
      </div>
    </StyledTodo>
  )
}

Answer 1

Replace
with
сhangeHandler={changeTodo}