Not Rendering Card - React

Question

I'm new to React, and I would like to know if someone can help me?

I'm trying to use useEffect and State to manipulate the API. But the cards are not rendering.

Sometimes all the cards are rendering, other times not.. and they always come on a different order even after sorting them :( Can you help me?

App.js

/* eslint-disable react-hooks/exhaustive-deps */
import React, { useState, useEffect } from "react";
import PlayerList from "./PlayerList";
import axios from "axios";

function App() {
  const Team = [
   ...
  ];
  const Team2 = [
   ...
  ];
  const Team3 = [
   ...
  ];

  const teamForLoop = [Team, Team2, Team3];

  const [allPlayers, setAllPlayers] = useState([]);
  const [team, setTeam] = useState([]);
  const [allTeams] = useState(teamForLoop);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const playerInfo = async () => {
      setLoading(true);
      allTeams.map(async (teamArray) => {
        setTeam([]);
        teamArray.map(async (player) => {
          let playerName = player.split(" ");
          const result = await axios.get(
            `https://www.thesportsdb.com/api/v1/json/2/searchplayers.php?p=${playerName[0]}%20${playerName[1]}`
          );
          if (result.data.player === null) {
            setTeam((state) => {
              return [...state];
            });
          } else {
            setTeam((state) => {
              return [...state, result.data.player[0]];
            });
          }
        });
        setAllPlayers(team);
      });
      setLoading(false);
    };
    playerInfo();
  }, [allTeams]);

  if (loading) return "...Loading...";

  return (
    <>
      <PlayerList allPlayers={allPlayers} />
    </>
  );
}

export default App;

PlayerList.js

import React from "react";

export default function PlayerList({ allPlayers }) {
  const myData = []
    .concat(allPlayers)
    .sort((a, b) => (a.strNumber > b.strNumber ? 1 : -1))
    .sort((a, b) => (a.idTeam !== b.idTeam ? 1 : -1));

  return (
    <div>
      {myData.map((player, index) => (
        <div key={index}>
          <div className="playerCard">
            <img
              className="playerImage"
              src={player.strCutout}
              alt={`${player.strPlayer}`}
            />
            <h1 className="playerName">{player.strPlayer}</h1>
            <h2 className="playerNumber">{player.strNumber}</h2>
          </div>
        </div>
      ))}
    </div>
  );
}

Codesandbox link: "https://codesandbox.io/s/busy-orla-v872kt?file=/src/App.js"