I have a button that runs an onClick function as follows:

<button
      onClick={handler}
      id="generate"
      className="flex items-center justify-center gap-2 rounded-lg border border-[#404040] bg-[#0570eb] px-4 py-2 font-medium shadow-lg hover:bg-[#0465d3]"
    >
      <RefreshCw size={18} />
      Generate
    </button>

const handler= () => {
    let generator = new PasswordGenerator()
    setPassword(generator.generatePassword(strengthOption, numbersOption, symbolsOption))
  }

Why can't I just do <button onClick={setPassword(generator.generatePassword(...))}> instead? Currently I'm using an arrow function that executes the same generatePassword()? Why does it have to be an arrow function for the onClick button?