im coding a chess game to learn react. So, i got this on the Board component:

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>
    );
}

And on the Square component i got this:

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>
    );
}

The idea is that when i click on a square all the squares change their color. The state is changing in both components, also the color state in square is changing, but the visual colors dont. ¿What could be the problem?