Because shipsJSON is scoped to the githubUsers function. Maybe the best way is to await that returned data within another async function, and then loop over the data.

async function githubUsers() {
  let response = await fetch('https://run.mocky.io/v3/b9f7261a-3444-4bb7-9706-84b1b521107d');
  return response.json();
}

async function main() {
  const shipsJSON = await githubUsers();
  // rest of your code
}

main();

Alternatively since fetch returns a promise:

function githubUsers() {
  return fetch('https://run.mocky.io/v3/b9f7261a-3444-4bb7-9706-84b1b521107d');
}

async function main() {
  const response = await githubUsers();
  const shipsJSON = await response.json();
  // rest of your code
}

main();

You are using async function, so githubUsers call won't complete before your foreach loop. Also, you are declaring shipsJSON variable inside scope of githubUsers, meaning it won't be available outside it. So you should use return to get it to outer scope. Do it like this:

async function githubUsers() {
  let response = await fetch('https://run.mocky.io/v3/b9f7261a-3444-4bb7-9706-84b1b521107d')
  return response.json()
}

async function fetchAndLoop() {
    const json = await githubUsers()



    json.forEach((item) => {
      item.forEach((nestedItem) => {
        placeCharacter(nestedItem.x, nestedItem.y, "O", myGrid)
        // placeCharacter(nestedItem.x, nestedItem.y, 'O', myGrid);
        placeRandomCharacter('O', enemyGrid, enemyGridSize);
        drawBreak();

      });
}

fetchAndLoop();