ReactでのTodoリスト編集機能実装について

閲覧ありがとうございます。
下記問題についてご教授いただけますと幸いです。

前提・実現したいこと

現在作成中のTodoリストに編集機能を追加したい。

発生している問題・エラーメッセージ

inputを編集したうえで追加する機能は実装できたが、
複数のタスクを追加した後に任意のinputを編集する際、フォーカスしたinput以外のinputも全て入力されてしまう。

該当のソースコード

■index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

■index.js

import React from 'react';
import ReactDOM from 'react-dom';

//コンポーネント
import { App } from './components/App'

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

■App.jsx

import React, {useState} from 'react';
import '../index.css';

export const App = () => {
  const [todoText, setTodoText] = useState('');
  const [todoEdit, setTodoEdit] = useState('');
  const [incompletedTodos, setIncompletedTodos] = useState([]);
  const [completedTodos, setCompletedTodos] = useState([]);
  const onChangeTodoText = (e) => {
    setTodoText(e.target.value);
  };
  const onClickTodoAdd = () => {
    if(todoText === '') {
      return false;
    };
    const newTodos = [...incompletedTodos, todoText];
    setIncompletedTodos(newTodos);
    setTodoText('');
  };
  const onClickDelete = (index) => {
    const newTodos = [...incompletedTodos];
    newTodos.splice(index, 1);
    setIncompletedTodos(newTodos);
  };
  const onClickComplete = (index) => {
    const newIncompleteTodos = [...incompletedTodos];
    newIncompleteTodos.splice(index, 1);
    setIncompletedTodos(newIncompleteTodos);

    const newcompleteTodos = [...completedTodos, incompletedTodos[index]];
    setCompletedTodos(newcompleteTodos);
  };
  const onClickBack = (index) => {
    const newCompletedTodos = [...completedTodos];
    newCompletedTodos.splice(index, 1);
    setCompletedTodos(newCompletedTodos);

    const newIncompleteTodos = [...incompletedTodos, completedTodos[index]];
    setIncompletedTodos(newIncompleteTodos);
  };

  const onChangeTodoEdit = (e) => {
    setTodoEdit(e.target.value);
  };
  const onClickIncompleteTodoEdit = (index) => {
    if(todoEdit === '') {
      return false;
    };
    const newTodos = [...incompletedTodos, todoEdit];
    newTodos.splice(index, 1);
    setIncompletedTodos(newTodos);
    setTodoEdit('');
  };

  return (
    <>
      <div className="todo-section input-area">
        <h1>TODO LIST</h1>
        <input placeholder="TODOを入力" value={todoText} onChange={onChangeTodoText} />
        <button onClick={onClickTodoAdd}>追加</button>
      </div>
      <div className="todo-section incompleted-area">
        <h2>incompleted TASKS</h2>
        <ul className="todo-list">
          {incompletedTodos.map((todo, index) => {
            return (
              <li key={todo} className="todo-list_item">
                <div className="todo-list_item_upper">
                  <p>{todo}</p>
                  <div className="button-wrapper">
                    <button onClick={() => onClickComplete(index)}>完了</button>
                    <button onClick={() => onClickDelete(index)}>削除</button>
                  </div>
                </div>
                <div className="todo-list_item_bottom">
                  <input placeholder="TODOを編集する" value={todoEdit} onChange={onChangeTodoEdit} />
                  <div className="button-wrapper">
                    <button onClick={() => onClickIncompleteTodoEdit(index)}>内容を変更する</button>
                  </div>
                </div>
              </li>
            );
          })}
        </ul>
      </div>
      <div className="todo-section completed-area">
        <h2>COMPLETED TASKS</h2>
        <ul className="todo-list">
          {completedTodos.map((todo, index) => {
            return(
              <li key={todo} className="todo-list_item">
                <div className="todo-list_item_upper">
                  <p>{todo}</p>
                  <div className="button-wrapper">
                    <button onClick={() => onClickBack(index)}>戻す</button>
                  </div>
                </div>
                <div className="todo-list_item_bottom">
                  <input placeholder="TODOを編集する" />
                  <div className="button-wrapper">
                    <button>内容を変更する</button>
                  </div>
                </div>
              </li>
            );
          })}
        </ul>
      </div>
    </>
  );
};