Цикл по двум массивам объектов для передачи совпадающих значений в новый массив не работает в React, но работает в JS Fiddle

У меня есть два набора данных разной длины. Мне нужно перебрать оба массива и вставить URL-адрес фотографии соответствующего идентификатора игрока в новый массив. Я делаю это после, данные API загружены в мой компонент React, поэтому, похоже, это не связано с тем, что данные еще не загружены. Я могу console.info обоих наборов данных и видеть, что они успешно возвращаются из API. Все это работает в JS Fiddle (ссылка ниже), но не в React. Так что мне сложно отследить, что происходит.

Вот мои наборы данных (все они явно сокращены):

Этот массив объектов возвращается из конечной точки API, которая содержит всю информацию о плеере, такую ​​как идентификатор, URL-адреса фотографий и т. д. (Это более 1200 объектов):

playerInfo = [
 {PlayerID: 123, PhotoURL: url123},
 {PlayerID: 345, PhotoURL: url345},
 {PlayerID: 678, PhotoURL: url678},
 {PlayerID: 910, PhotoURL: url910},
 {PlayerID: 1112, PhotoURL: "url1112"},
 {PlayerID: 1213, PhotoURL: "url1213"}
];

Эти данные возвращаются из отдельной конечной точки API, в которой перечислены текущие лидеры (возвращаются 40 лучших лидеров):

playerIDs = [123, 345, 678, 910]

К сожалению, эти данные таблицы лидеров не включают URL-адреса фотографий с возвращенными идентификаторами игроков, поэтому мне нужно сравнить идентификаторы игроков в обоих массивах, а затем нажать PhotoURL из указанного выше соответствующего массива playerInfo.

Мой подход заключается в следующем (я, вероятно, мог бы использовать для этого какую-то функцию ES6, поэтому, пожалуйста, дайте мне знать, если это так.):

let leaderPhotos = [];

for(let i = 0; i < playerInfo.length; i++) {
  if (playerInfo[i].PlayerID === playerIDs[i]) {
    leaderPhotos.push(playerInfo[i].PhotoURL);
  }
}

Я считаю, что даже несмотря на то, что массив playerIDs короче, чем массив PlayerInfo, установка цикла на длину массива PlayerInfo позволит сравнивать более короткий массив таблицы лидеров PlayerIDs с идентификатором каждого игрока в массиве объектов PlayerInfo, поскольку любой проигрыватель может быть в таблице лидеров в любой момент. Если идентификатор игрока совпадает в обоих массивах, он помещает значение URL-адреса фотографии объекта PlayerInfo в массив, который я затем могу использовать для загрузки в фотографии лучших лидеров. Поскольку цикл проходит через таблицу лидеров PlayerIDs, возвращенные URL-адреса фотографий располагаются в порядке таблицы лидеров.

Здесь он работает в JS Fiddle. Вы можете видеть в консоли, что он выталкивает только URL-адреса фотографий соответствующих идентификаторов игроков. Отлично, именно то, что я хочу.

Однако, когда то же самое применяется внутри компонента React, ответственного за обработку данных API, я получаю пустой массив в консоли после того, как логика выполнит его. Я могу console.info оба возвращенных набора данных API, чтобы убедиться, что я успешно возвращаю данные для работы.

Я возился и решил посмотреть, будет ли установка обоих индексов массива на значение работать так:

let leaderPhotos = [];

      if (playerInfo[0].PlayerID === playerIDs[0]) {
        leaderPhotos.push(playerInfo[0].PhotoURL);
      } else {
         return false;
      } console.info(leaderPhotos);

И, конечно же, это подтолкнет URL-адрес подходящей пары к фотографии в leaderPhotos, как и ожидалось без в цикле for. Мне трудно понять, почему цикл for не работает, хотя в JS Fiddle он доказывает, что он должен возвращать желаемые результаты. Заранее благодарим за любые советы!