REACT: Как поменять местами элементы в списке дел по их приоритетам

Я делаю список дел и хочу сделать функцию, которая меняет задачи по их приоритетам. Например:

1. Идти в тренажерный зал

2. Научитесь реагировать

   Я хочу сделать кнопку, которая перемещает элементы вверх и вниз и получает:

   1. Научитесь реагировать

   2. Идти в тренажерный зал

У меня есть функция, которая, я уверен, работает правильно, но я думаю, что проблема в <div>, где я использую эту функцию.

const moveUpDown = (currentIndex, nextIndex) =>{
  const newCounts = [...todos]

  const currentCounts = newCounts[currentIndex]
  const previousCounts = newCounts[nextIndex]

  newCounts[currentIndex] = previousCounts
  newCounts[nextIndex] = currentCounts

  setTodos(newCounts)
}

Это мое возвращение:

function ToDo(props) {
    return (
        <div key = {props.todo} className = "item-todo">
            <div 
                className = {props.todo.complete ? "item-text strike" : "item-text"}
                onClick = {() => props.toggleTask(props.todo.id)}
                >
                {props.todo.task}
            </div>
            <div className = "item-delete" onClick = {() => props.removeTask(props.todo.id)}>
                X
            </div>
// Lines below I'm using function moveUpDown
            <div
                className = "item-moveUpDown" disabled = {props.todo === 0} onClick = {() => props.moveUpDown(props.todo, props.todo - 1)}
                >
                Up
            </div>
            <div
                className = "item-moveUpDown" disabled = {props.todo === 0} onClick = {() => props.moveUpDown(props.todo, props.todo + 1)}
            >
                Down
            </div>
        </div>
    )
}