Assigning a function to a variable, but the value returns undefined

Question

i'm trying to 'validate' an input by using an if else statement to alert and call the function again if the value isNan, and to return the value if else. but i'm getting 'undefined' after returning userInput

function parsePrompt () {
  let promptUserInput = prompt('Enter the amount of squares desired on each side of the new grid!');
  
  if (isNan(promptUserInput)) {
    console.log(promptUserInput);
    alert('Please enter a number below 100!');
    parsePrompt();
  } else {
    console.log('Valid, user input ${promptUserInput}');
    let userInput = promptUserInput * promptUserInput;
    console.log(userInput);
    return userInput
  }
  
}

document.querySelector('button').addEventListener('click', function() {
  let askForSize = parsePrompt();
  container.replaceChildern();
  console.log(askForSize);
  
  createGrid(askForSize);
})

one thing i've realized by playing around with the code is that getPrompt only returns undefined if the first instance of the prompt is a string (i.e first prompt string, second prompt number, returns undefined). but if the first prompt is a string, everything works smoothly and the expected result appears. i'm guessing there's an issue with the code that runs if the if argument is true?