The project i am creating in React.js requires me to take in input from the user and display it on the webpage, i want my balance button to display the input value when clicked but currently when i enter a value in the input box it displays automatically rather than waiting for the button click to be triggered before displaying on the webpage.
from my code below i was wondering if i am missing something like a handleClick function or add event handlers? As i am new to working with React.js please help??

import React from "react";
import { useState } from "react";

export default function BalanceInput() {
  const [userBalance, setUserBalance] = useState(0);

  function displayBalance() {
    setUserBalance(0);
  }

  return (
    <div>
      <label for="balanceInput">Enter Bank Balance: </label>
      <input
        type="text"
        onChange={(event) => setUserBalance(event.target.value)}
        id="balanceInput"
        placeholder="Enter balance here"
        defaultValue={0}
      />

      <h3>Current Balance: {userBalance}</h3>
      <button onClick={displayBalance}>Balance</button>
    </div>
  );
}