Intento aprender a renderizar componentes de reacción, pero el problema es que tengo una página de inicio de sesión con 2 campos de entrada y 1 botón como:

 function LoginPage() { const [username, changeUsername] = useState(''); const [password, changePassword] = useState(''); const loginRequest = async (username, password) => { let response = await service.loginRequest(username, password); console.log(response); } return ( <Card hoverable className='transaction-button-card'> <h1>Enter username and password</h1> <input type="text" placeholder="Username" onChange={e => changeUsername(e.target.value)} value={username}></input> <input type="text" placeholder="Password" onChange={e => changePassword(e.target.value)} value={password}></input> <Button onClick={loginRequest(username, password)} className='withdraw-deposit-button'>Login/Deposit</Button> </Card> ); } export default LoginPage;

Cuando se procesa la página, la función loginRequest (nombre de usuario, contraseña) se activa automáticamente una vez y para cada carácter de entrada en los campos de entrada también se activa la misma función y se envía una solicitud para cada carácter de entrada. ¿Como puedó resolver esté problema? (No quiero enviar la solicitud automáticamente cuando se abre la página y enviar la solicitud solo con el botón). Te agradecería que definas el problema.