¿Cómo cambiar el color del botón individual de gris a negro al hacer clic y cómo asignar la propiedad "clave" en React?

Recibo este mensaje "Advertencia: cada niño en una lista debe tener un accesorio de "clave" único". aunque ya asigno la clave. Y cómo cambiar el color de los botones individuales de gris a negro (no todos los botones). Aquí está mi código. Estoy usando reaccionar.

Cuadrado.js

 import React from 'react'; export default function Square(props) { const square = { width: "100px", height: "100px", color:"yellow", backgroundColor: props.shade }; return ( <button className={"square " + props.shade} onClick={props.onClick} style={square} key={props.value}>{props.value} </button> ); }

Tablero.js

 import Square from './Square.js'; import React from 'react'; export default class Board extends React.Component { constructor(props){ super(props); this.state ={ temp:"", colorB:"black", } } color=()=> { this.setState({ temp: this.state.colorB}) this.setState({ colorB: this.state.temp}) } renderSquare(key, squareShade) { return <Square shade = {squareShade} onClick={this.color} /> } render() { const board = []; for(let i = 0; i < 8; i++){ const squareRows = []; for(let j = 0; j < 8; j++){ const squareShade = (isEven(i) && isEven(j)) || (!isEven(i) && !isEven(j))? this.state.temp : this.state.colorB; squareRows.push(<Square shade = {squareShade} onClick={this.color} key={(i*8 + j).toString()} //the key value={(i*8 + j).toString()} />); } board.push(<div className="board-row">{squareRows}</div>) } return ( <div> {board} </div> ); } } function isEven(num){ return num % 2 === 0 } /* Some of the codes are referenced from: https://www.techighness.com/post/develop-two-player-chess-game-with-react-js/ */