Aquí tengo 2 archivos JS (React JS) y un pequeño error. La idea es que esta aplicación es una TodoList y se crea un elemento haciendo clic en el botón respectivo. Funciona bien, pero cada vez que agrego un elemento nuevo, el color de la li permanece igual. No se mueve después de ese LI.

Aplicación.js

 import React, { useState, useRef } from "react" import ItemToDo from "./ItemToDo" import "./style.scss" export default function App() { const [items, setItems] = useState([]) const [currentMap, setMap] = useState() const inputRef = useRef() const addElement = () => { if (inputRef.current.value === "") { alert("Please enter something...") } else { items.unshift(inputRef.current.value) setItems(items) console.log(items) inputRef.current.value = "" updateMap() } } const updateMap = () => { setMap(items.map((item, key) => <ItemToDo key={key} item={item} removeElement={() => removeElement(key)} />)) } const removeElement = (index) => { delete items[index] updateMap() } const handleKey = (e) => { if (e.key === 'Enter') { addElement() } } return ( <> <h1>ToDo List</h1> <input type="text" placeholder="Name here" ref={inputRef} id="elementName" onKeyDown={handleKey} autoFocus /> <input type="button" value="Add Item" id="submit" onClick={addElement} /> <div> <ul> {currentMap} </ul> </div> </> ) }

y ItemToDo.js

 import React, {useState} from "react" export default function ItemToDo({item, removeElement}) { const [color, setColor] = useState(true) const setBackground = () => { setColor(false) } return ( <li style={{backgroundColor: color ? "green" : "red"}}> <span>{item}</span> <input type="button" value="Delete" onClick={removeElement} /> <input type="button" value="Done!" onClick={() => setBackground()} /> </li> ) }

Y quiero corregir este error... Básicamente, si agrego un nuevo elemento, el color rojo permanece allí. ¡Gracias de antemano por cualquier idea!