L'instruction Switch-case détruit les composants rendus

J'ai le problème suivant: j'utilise le package nba-react-logos et cela fonctionne bien, jusqu'à ce que j'essaie de déterminer quel composant doit être retourné. Voici mon composant qui détermine quel composant du package doit être rendu:

(8) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
0:
homeTeam: "Golden State Warriors"
homeTeamAbbreviation: "GSW"
homeTeamScore: 100
visitorTeam: "Boston Celtics"
visitorTeamAbbreviation: "BOS"
visitorTeamScore: 105
__proto__: Object
1:
homeTeam: "Los Angeles Lakers"
homeTeamAbbreviation: "LAL"
homeTeamScore: 99
visitorTeam: "Sacramento Kings"
visitorTeamAbbreviation: "SAC"
visitorTeamScore: 97
__proto__: Object
2:
homeTeam: "Minnesota Timberwolves"
homeTeamAbbreviation: "MIN"
homeTeamScore: 116
visitorTeam: "Washington Wizards"
visitorTeamAbbreviation: "WAS"
visitorTeamScore: 137
__proto__: Object
3:
homeTeam: "Houston Rockets"
homeTeamAbbreviation: "HOU"
homeTeamScore: 111
visitorTeam: "Indiana Pacers"
visitorTeamAbbreviation: "IND"
visitorTeamScore: 102
__proto__: Object
4:
homeTeam: "Orlando Magic"
homeTeamAbbreviation: "ORL"
homeTeamScore: 111
visitorTeam: "San Antonio Spurs"
visitorTeamAbbreviation: "SAS"
visitorTeamScore: 109
__proto__: Object
5:
homeTeam: "Oklahoma City Thunder"
homeTeamAbbreviation: "OKC"
homeTeamScore: 127
visitorTeam: "Philadelphia 76ers"
visitorTeamAbbreviation: "PHI"
visitorTeamScore: 119
__proto__: Object
6:
homeTeam: "Memphis Grizzlies"
homeTeamAbbreviation: "MEM"
homeTeamScore: 107
visitorTeam: "Utah Jazz"
visitorTeamAbbreviation: "UTA"
visitorTeamScore: 106
__proto__: Object
7:
homeTeam: "Charlotte Hornets"
homeTeamAbbreviation: "CHA"
homeTeamScore: 109
visitorTeam: "Detroit Pistons"
visitorTeamAbbreviation: "DET"
visitorTeamScore: 106

Il existe également un composant fonctionnel, qui est utilisé dans mon application:

    export default function TeamScoreBox(props) {
    return (
        <div className="mainScoreBarTeam">
            <PickTeam team={props.teamAbbreviation} size={100}/> 
        </div>
    );
}

Le problème est que si je veux rendre ces composants dans de nombreux composants sur la même page, je perds des couleurs. Je ne sais pas si le problème vient de mon code ou peut-être de ce package. Je peux voir que si je les rend en composant, ils semblent bons pendant 1 à 2 secondes, jusqu'à ce que mon composant basé sur la requête http se charge - alors cette disparition de couleur apparaît.

ÉDITER

Ok, alors voici une description plus précise. J'ai le code suivant:

C'est un composant qui détermine quel logo d'équipe doit être rendu. Les accessoires sont générés à partir de la requête axios sur mon serveur.

    export default function Score(props) {
    const [game, setGame] = useState(props.gameData);

    return (
        <Card className="mainScoreBarItem">
            <Row className="align-items-center h-100">
                <Col >
                    <TeamScoreBox
                        teamName={game.homeTeam}
                        teamAbbreviation={game.homeTeamAbbreviation}
                    />
                </Col>
                <Col >
                    <div className="mainScoreBarResult">{game.homeTeamScore}:{game.visitorTeamScore}</div>
                </Col>
                <Col>
                    <TeamScoreBox
                        teamName={game.visitorTeam}
                        teamAbbreviation={game.visitorTeamAbbreviation}
                    />
                </Col>
            </Row>

        </Card>
    )
}

Le suivant est juste pour le test, c'est HomeComponent, et il est rendu sans aucune demande:

    export default function Scores() {
    const [matches, setMatches] = useState([]);
    const [loading, setLoading] = useState(true);
    useEffect(() => {
        setLoading(true)
        axios({
            method: 'GET',
            url: 'https://localhost:44324/apidata/todaygames',
            headers: {
                'Content-Type': 'application/json',
                'Access-Control-Allow-Origin': '*',
                'Access-Control-Allow-Methods': 'GET,PUT,POST,DELETE,PATCH,OPTIONS',
            },
        }).then((res) => {
            
            setMatches(res.data);
            setLoading(false);
        }).catch((error) => {
            console.log(error);
        });
    }, []);

    
        return !loading 
        ?
        (
            <Row className="mainScoreBar">
                {matches.map((key) => {
                    return (
                        <Col key={key.homeTeam + key.visitorTeam} sm={4} style={{ display: "inline-block" }}>
                            <Score gameData={key} />
                        </Col>
                    );
                })}
            </Row>
        )
        : <Loading />
}

Et maintenant, voici les résultats:

1. 1-2 premières secondes après l'actualisation de la page

2. Après avoir obtenu les données dans la barre de jeux (en haut)

Et c'est ce avec quoi j'ai un problème. Comme vous pouvez le voir, par exemple, le logo Boston Celtics (le vert) perd sa couleur noire, les 76ers (logo avec sept rouges et six bleus) perdent leur couleur rouge.

MODIFIER v2

J'ai fait quelques corrections comme @emi l'a suggéré, mais cela n'a pas aidé.

Il y a donc le code complet de mes composants:

App.js:

    export default function App() {
  return (
    <div className="background">
      <ContextProvider>
        <Router>
          <Navigation />
          <Scores />
          <div className="content">
            <Route exact path="/" component={Home} />
            <Route path="/login" component={Login} />
            <Route path="/register" component={Register} />
            <Route path="/players/:id" exact={true} component={PlayerStats} />
            <Route path="/players" exact={true} component = {Players} />
            <ProtectedRoute path='/logout' />
          </div>
        </Router>
      </ContextProvider>
    </div>
  );
}

Sur chaque page, j'ai la navigation et les scores, alors passez au composant Scores:

Scores.js:

    export const Home = () => {
    return (
        <div><Logos.BOS></Logos.BOS><Logos.PHX></Logos.PHX><Logos.BOS></Logos.BOS><Logos.PHI></Logos.PHI><Logos.PHI></Logos.PHI>
        <PickTeam team={"PHI"} size={100}/></div>
    );
}

Score.js:

    export default function TeamScoreBox(props) {
    return (
        <div className="mainScoreBarTeam">
            <PickTeam team={props.teamAbbreviation} size={100}/> 
        </div>
    );
}

Et TeamScoreBox.js:

export default function PickTeam({team, size}) {
    const Found = Constants.TEAMS_LOGOS[team];
    return Found ? <Found size={size} /> : <div />;
}

Ainsi, la route "/" doit afficher la navigation, les scores et (mentionné dans la première édition) le contrôleur Home.

Ma réponse axios:

    export const TEAMS_LOGOS = {
    [TEAM_76ERS]: Logos.PHI,
    [TEAM_RAPTORS]: Logos.TOR,
    [TEAM_TIMBERWOLVES]: Logos.MIN,
    [TEAM_BUCKS]: Logos.MIL,
    [TEAM_HORNETS]: Logos.CHA,
    [TEAM_NUGGETS]: Logos.DEN,
    [TEAM_PISTONS]: Logos.DET,
    [TEAM_MAGIC]: Logos.ORL,
    [TEAM_PELICANS]: Logos.NOP,
    [TEAM_LAKERS]: Logos.LAL,
    [TEAM_THUNDER]: Logos.OKC,
    [TEAM_MAVERICKS]: Logos.DAL,
    [TEAM_KINGS]: Logos.SAC,
    [TEAM_BLAZERS]: Logos.POR,
    [TEAM_JAZZ]: Logos.UTA,
    [TEAM_HAWKS]: Logos.ATL,
    [TEAM_WARRIORS]: Logos.GSW,
    [TEAM_SUNS]: Logos.PHX,
    [TEAM_NETS]: Logos.BKN,
    [TEAM_KNICKS]: Logos.NYK,
    [TEAM_WIZARDS]: Logos.WAS,
    [TEAM_SPURS]: Logos.SAS,
    [TEAM_BULLS]: Logos.CHI,
    [TEAM_CELTICS]: Logos.BOS,
    [TEAM_ROCKETS]: Logos.HOU,
    [TEAM_PACERS]: Logos.IND,
    [TEAM_CLIPPERS]: Logos.LAC,
    [TEAM_CAVALIERS]: Logos.CLE,
    [TEAM_GRIZZLIES]: Logos.MEM,
    [TEAM_HEAT]: Logos.MIA
}