(React)useStateの配列の中の連想配列の更新について

前提

ReactでToDoリストのようなものを作っています。
todosという配列のstateを作り、下記のように追加していくイメージで実装しています。

　const [todos, setTodos] = useState([])

// todoを追加する関数
  const addTodo = () => {
    setTodos([
      ...todos,
      {
        todoNumber: todoNumber,
        todoTitle: todoTitle,
      },
    ])
  }

最終的には以下のようなデータ構造になることを期待しています。

"todos" : "[
　"{ "todoNumber" : "1", "todoTitle" : "テスト1" }",
　"{ "todoNumber" : "2", "todoTitle" : "テスト2" }",
　"{ "todoNumber" : "3", "todoTitle" : "テスト3" }",
　　…
　]"

下記のように削除することもできますが、このままだと削除したtodoNumberが抜けた状態になります。
（例、[1, 2, 3, 4]のtodosがある状態で2を削除すると、[1, 3, 4]となる）

  const deleteTodo = todo => {
    // const deleteTodoNumber = todo.todoNumber
    setSteps(steps.filter(x => x !== step))
    todos.map(todo => {
      if (todo.todoNumber > deleteTodoNumber) {
        // 削除したtodoNumberよりも数字の大きいtodoのtodoNumberを更新する処理を書く？
      }
    })
  }