Estoy codificando un juego de ajedrez para aprender a reaccionar. Entonces, obtuve esto en el componente Board:

 export default () => { const[squares,setSquares] = useState([]); useEffect(() => { let item; let squaresAux = []; setBoard(FEN).forEach((square,i) => { item = { value: square, pos: getXYPosition(i), color: getColor(i) } squaresAux.push(item); }) setSquares(squaresAux); },[]) const handleClick = () => { let update = squares.map(square => { square.color = "active"; return square; }) setSquares(update); } return( <div className="board"> {squares.map((square) => ( <Square handleClick = {handleClick} color={square.color} value={square.value} /> ))} </div> ); }

Y en el componente Square obtuve esto:

 import React,{useState} from 'react'; export default (props) => { const[value,setValue] = useState(props.value); const[color,setColor] = useState(props.color); const handleClick = () => { props.handleClick(); } return( <div> <div className={`cell ${color}`} onClick={() => handleClick()}>{value}</div> </div> ); }

La idea es que cuando hago clic en un cuadrado, todos los cuadrados cambian de color. El estado está cambiando en ambos componentes, también está cambiando el estado del color en el cuadrado, pero los colores visuales no. ¿Cual podría ser el problema?