Creo que el problema principal es la clave de los elementos que configuras como dice el documento de reacción:

Cuando no tiene ID estables para los elementos representados, puede usar el índice de elementos como clave como último recurso:

 const todoItems = todos.map((todo, index) => // Only do this if items have no stable IDs <li key={index}> {todo.text} </li> );

No recomendamos usar índices para claves si el orden de los elementos puede cambiar. Esto puede tener un impacto negativo en el rendimiento y puede causar problemas con el estado del componente. Consulte el artículo de Robin Pokorny para obtener una explicación detallada sobre los impactos negativos del uso de un índice como clave. Si elige no asignar una clave explícita a los elementos de la lista, React usará de forma predeterminada los índices como claves.

Como en este artículo dice:

Reordenar una lista o agregar y eliminar elementos de una lista puede causar problemas con el estado del componente, cuando los índices se usan como claves. Si la clave es un índice, el reordenamiento de un elemento lo cambia. Por lo tanto, el estado del componente puede confundirse y usar la clave anterior para una instancia de componente diferente.

¿Cuáles son algunas excepciones en las que es seguro usar el índice como clave?

-Si tu lista es estática y no cambiará.

-Nunca se reordenará la lista.

-La lista no se filtrará (agregando/eliminando elementos de la lista).

-No hay identificadores para los elementos de la lista.

Si configura una clave confiable en sus artículos con algún contador o generador de identificación, su problema se resolvería.

algo como esto:

 export default function App() { const [list, setList] = useState([]); const id = useRef({ counter: 0 }); const AddInput = () => { console.log(id); setList([...list, { placeholder: "Class Name", id: id.current.counter++ }]); }; const DeleteInput = (id) => { setList(list.filter((item, i) => item.id !== id)); }; const InputChangeHandler = (event, index) => { const l = [...list]; l[index].value = event.target.value; setList(l); }; return ( <div> <button onClick={AddInput}>Add</button> {list.map((item, key) => ( <div key={item.id}> <input type={"text"} id={key} placeholder={item.placeholder} onChange={(e) => InputChangeHandler(e, key)} /> <button id={item.id} onClick={() => DeleteInput(item.id)}> Delete </button> </div> ))} </div> ); }

Usar filtro.

 const DeleteInput = (index) => { const l = list.filter((_, i) => i !== index); setList(l); };

Pase id a su función DeleteInput y para eliminar simplemente filtre la lista de elementos con id

 const DeleteInput = (id) => {const filterItemList = list.filter((item) => item.id!== id);setList(filterItemList ); };