Вернуть значение json через функцию выборки

Я пытаюсь вывести имя игрока из массива JSON, используя выборку, и просто возвращаю его туда, где я его вызываю, я могу вставить возврат в элементы html.

Консоль регистрирует результаты, которые я хочу, отлично, но возврат возвращает undefined в элементе.

Пример API JSON:

{
    "PlayerID": 10000439,
    "Jersey": 8,
    "Position": "RF",
    "FirstName": "Nick",
    "LastName": "Castellanos"
}

HTML

<div id="scoreboard">
        <div class="home">TEAM1<span class="runs"></span>0</div>
        <div class="away">TEAM2<span class="runs"></span>0</div>
    </div>
    <div class="batting">
        Batting:
        <span id="batterPlayerName">
        Player Name
    </span>
    </div>
    <div class="pitching">
        Pitching:
        <span id="pitcherPlayerName">
        Player Name
    </span>
    </div>

JS

function PlayerName(id) {
     var url = `https://apiurl/Player/${id}`;
     fetch(url)
     .then(response => response.json())
     .then(data => {
         console.log(`${data.FirstName} ${data.LastName}`)
         return data.FirstName + ' ' + data.LastName;
     })
}



var curBatter = document.querySelector('#batterPlayerName');
var curPitcher = document.querySelector('#pitcherPlayerName');

curBatter.innerHTML = PlayerName('10000439');
curPitcher.innerHTML = PlayerName('10000526');

консоль: Ник Кастельянос PlayerName div: Ватин: не определено