React nie renderuje po zmianie stanu

Siema.
Piszę sobie w reacie taką grę, która polega na tym, że wyświetla się na stronie 8 kolorów, kiedy klikniesz na kolor którego wcześniej nie kliknąłeś otrzymujesz jeden punkt, jeżeli klikniesz w kolor który wcześniej wybrałeś to tworzy się nowy zestaw kolorów i renderuje.
Dodatkowo, kiedy klikniesz w kolor którego wcześniej nie wybrałeś, następuje losowa zmiana ich pozycji.

Wszystko pięknie działa, tylko nic się nie chce renderować na nowo po zmianach czy to w pozycji kolorów w tablicy, czy to po stworzeniu nowej tablicy kolorów.

import Card from './components/Card'
import Scoreboard from './components/Scoreboard'
import './styles/App.css'
import React, {Component} from 'react'
import randomColor from 'randomcolor'


class App extends Component {

  constructor()
  {
    super()
    this.state = {
      cards: [],
      pickedCards: [],
      score: 0,
      bestScore: 0
    }

    this.handleCardPick = this.handleCardPick.bind(this)
  }

  shuffle(arr) {
    for (let i = arr.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        [arr[i], arr[j]] = [arr[j], arr[i]];
    }
    return arr;
}

  initCardsArray()
  {
    let cards = []

    for(let i = 0; i < 8; i++)
    {
      cards.push(<Card id={"card" + i} color={randomColor()} handleCardPick={this.handleCardPick}/>)
    }

    this.setState({
      cards: cards
    })
  }

  componentDidMount()
  {
    this.initCardsArray()
  }

  handleCardPick(e)
  {
    let include = this.state.pickedCards.includes(e.target.id)

    if(!include)
    {
      this.setState(prevState => {

        prevState.cards = this.shuffle(prevState.cards)

        return {
          ...prevState,
          score: prevState.score + 1,
          pickedCards: prevState.pickedCards.concat(e.target.id)
        }
      }) 
    }
    else
    {
      this.setState(prevState => {
        return {
          cards: [],
          pickedCards: [],
          score: 0,
          bestScore: prevState.bestScore < prevState.score ? prevState.score : prevState.bestScore
        }
      })

      this.initCardsArray()
    }
  }

  render()
  {
    let cards = this.state.cards
    console.log(cards)
    return (
      <div className="App">
        <div id="cards-board">
          <div className="CardsRow">
            {cards.slice(0, 4)}
          </div>
          <div className="CardsRow">
            {cards.slice(4, 9)}
          </div>
        </div>
        <Scoreboard score={this.state.score} bestScore={this.state.bestScore}/>
      </div>
    );
  }
}

Już renderuje, trzeba komponentowi nadać klucz:
<Card key={...} id={"card" + i} color={randomColor()} handleCardPick={this.handleCardPick}/>