I am having a hard time discerning why when the user inputs the correct username/password in this page, they are not routed to my dashboard page. When I go to /dashboard "manually", it works fine. I am confused. Anyone have any tips? I also noticed that my console logs are not working - the page simply reloads. Would appreciate any tips at all that move me forward, thanks.

'use client'
import React, { useState } from 'react';
import { useRouter } from 'next/navigation';

const Login = () => {
  const router = useRouter();
  const [userSubmittedUsername, setUserSubmittedUsername] = useState('');
  const [userSubmittedPassword, setUserSubmittedPassword] = useState('');

  const handleUsernameChange = (event) => {
    setUserSubmittedUsername(event.target.value);
  }

  const handlePasswordChange = (event) => {
    setUserSubmittedPassword(event.target.value);
  }

  const handleSubmit = (event) => {
    event.preventDefault();
    
    if (userSubmittedUsername === 'rob') {
      console.log('entrez-vous');
      router.push('/dashboard');
    } else {
      console.log('incorrect username.');
    }
    
    console.log('Username:', userSubmittedUsername);
    console.log('Password:', userSubmittedPassword);
  }

  return (
    <div>
    <h1>Login</h1>
    <form onSubmit={handleSubmit}>
      <div>
        <label>Username:</label>
        <input
          type="text"
          value={userSubmittedUsername}
          onChange={handleUsernameChange}
        />
      </div>
      <div>
        <label>Password:</label>
        <input
          type="password"
          value={userSubmittedPassword}
          onChange={handlePasswordChange}
        />
      </div>
      <button type="submit">Log In</button>
    </form>
  </div>
  
  );
}

export default Login;