setTimeOut function not working if I pass an argument - Chatbot with JS

Question

I am doing chatbot and using the setTimeout function but when I pass an argument it doesn't work. If I remove the argument then it works but then the string template prints undefined cause it is needed.

// Starts here

const greeting = () => {
  showMessage(`Hi there, what's your name?`, 'bot')
  let question = 1
  console.log(question)
  console.log("first message");
}

setTimeout(greeting, 1000)


nameForm.addEventListener('submit', (e) => {
  e.preventDefault()
  let userName = document.getElementById('name-input').value 
  showMessage(userName, "user")
  setTimeout(showYogaCategories(userName), 2000)
})

const showYogaCategories = (name) => {
  showMessage(`Nice to meet you ${name}. What kind of yoga class you want to take today?`,'bot')
  let question = 2
  console.log(question)
}

This is what I have above this code (if needed):

const chat = document.getElementById('chat')
const inputWrapper = document.getElementById('input-wrapper')
const nameForm = document.getElementById('name-form');

// Global variables

let question = 0


// This function will add a chat bubble in the correct place based on who the sender is

const showMessage = (message, sender) => {
  if (sender === 'user') {
    chat.innerHTML += `
      <section class="user-msg">
        <div class="bubble user-bubble">
          <p>${message}</p>
        </div>
        <img src="assets/user.png" alt="User" />  
      </section>
    `
  } else if (sender === 'bot') {   
    chat.innerHTML += ` 
      <section class="bot-msg">
        <img src="assets/bot.png" alt="Bot" />
        <div class="bubble bot-bubble">
          <p>${message}</p>
        </div>
      </section>
    `      
  }

  chat.scrollTop = chat.scrollHeight
}