React.js Как сделать глобальный счетчик выигрышей? [closed]

Я делаю свою первую карточную игру на React.js и застрял в одном месте. Как я могу отобразить общее количество выигрышей? Например, если в этой игре компьютер набрал 10 очков и выиграл, а в следующих 15 очках глобальный счетчик должен показать 25.

App.js

import React from "react";
import './App.css';
import Start from "./components/Start";
import Game from "./components/Game";
import Result from "./components/Result";
import {game, result, start} from "./utils/constants";

class App extends React.Component{
    constructor(props) {
        super(props);
        this.state = {
            page: start,
            name: 'You',
            compWins: 0,
            playerWins: 0,
            countWinsPlayer: 0,
            countWinsComp: 0
        }
    }



     changePage = page => {
        this.setState({page});
     }

    changeName = name => {
        this.setState({name});
    }

    changeResult = (compWins, playerWins, countWinsPlayer,countWinsComp) => {
        this.setState({compWins, playerWins,countWinsPlayer,countWinsComp})
    }


    render() {
        switch (this.state.page) {
            case game:
                return <Game
                    name={this.state.name}
                    switchPage={this.changePage}
                    setResult={this.changeResult}/>;
            case result:
                return <Result
                    switchPage={this.changePage}
                    compWins={this.state.compWins}
                    playerWins={this.state.playerWins}
                    countWinsPlayer={this.state.countWinsPlayer}
                    countWinsComp={this.state.countWinsComp}
                    />;
            default:
                return <Start
                    switchName={this.changeName}
                    switchPage={this.changePage}/>;
        }
    }
}

export default App;

Start.js

import React from 'react';
import {game} from "../utils/constants";

class Start extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            name: ''
        }
    }

    render() {
        return (
            <div>
                <h1>Ready for war</h1>
                <input
                    onChange={(e) => this.setState({name: e.target.value})}
                    value={this.state.name}
                    type="text"
                    placeholder="Enter your name"/>
                <button onClick={() => {
                    this.props.switchPage(game);
                    this.props.switchName(this.state.name)
                }}>Start</button>
            </div>
        );
    }
}

export default Start;

Game.js

import React from 'react';
import {deck, result, shuffle} from "../utils/constants";

class Game extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            playerCard: 'Player card',
            compCard: 'Computer card',
            compWins: 0,
            playerWins: 0,
            countWinsPlayer: 0,
            countWinsComp: 0
        };
    }


    componentDidMount() {
        const cards = shuffle(deck);
        this.compCards = cards.slice(0, deck.length / 2);
        this.playerCards = cards.slice(deck.length / 2, deck.length);
    }

    handleClickNext = () => {
        if (this.playerCards.length) {
            const player = this.playerCards.pop();
            const comp = this.compCards.pop();

            if (player.rank > comp.rank) {
                //this.setState({playerWins: this.state.playerWins + 1});
                this.setState((state, props) => ({playerWins: state.playerWins + 1}));
                this.setState((state, props) => ({countWinsPlayer: state.countWinsPlayer + 1}));

            }
            if (player.rank < comp.rank) {
                this.setState({compWins: this.state.compWins + 1});
                this.setState({countWinsComp: this.state.countWinsComp + 1});
            }
            this.setState({
                playerCard: `${player.rank}, ${player.suit}`,
                compCard: `${comp.rank}, ${comp.suit}`
            });
        } else {
            this.props.setResult(this.state.compWins, this.state.playerWins, this.state.countWinsPlayer, this.countWinsComp);
            this.props.switchPage(result);
        }
    }

    render() {
        return (
            <div>
                <h1>Computer</h1>
                <p>{this.state.compCard}</p>
                <p>{this.state.playerCard}</p>
                <h1>{this.props.name}</h1>
                <button onClick={this.handleClickNext}>Next</button>
            </div>
        );
    }
}

export default Game;

Result.js

import React from 'react';
import {game} from "../utils/constants";

const Result = ({playerWins, compWins, switchPage, countWinsPlayer,countWinsComp}) => {
    const getResult = () => {
        if (playerWins > compWins) {
            return 'WIN';
        }
        if (playerWins < compWins) {
            return 'LOSE';
        }
        return 'DRAW';
    };
    return (
        <div>
            <h1>{getResult()}</h1>
            <h3>This game:</h3>
            <h3>Your wins {playerWins} - {compWins} Computer wins</h3>
            <h3>Total wins:</h3>
            <h3>Your wins {countWinsPlayer} - {countWinsComp} Computer wins</h3>
            <button onClick={() => switchPage(game)}>Again ?</button>
        </div>
    );
};

export default Result;

constans.js

export const start="Home";
export const game="Game";
export const result="Result";
export const createDeck = () => {
    const deck = [];
    const suits = ['spade', 'club', 'diamond', 'heart'];
    for (let i = 0; i < suits.length; i++){
        for (let j = 1; j <= 13; j++){
            deck.push({rank: j, suit: suits[i]});
        }
    }
    return deck;
};
export const deck = createDeck();
export const shuffle = arr => {
    const res = [...arr];
    res.sort(() => Math.random() - 0.5);
    return res;
}