React에서 이벤트 처리하기(추가퀴즈)

교안 [참고할만한 자료]도 읽어보고 고민을 해보았는데
추가퀴즈에 대한 정답에 대한 방향성을 모르겠어요

import { useState } from "react";

function App() {
  return <div>{user.login ? <HomePage /> : <Login />}</div>;
}

function HomePage() {
  return (
    <div>
      <h1>Welcome {user.nickname}</h1>
      <button>로그아웃</button>
    </div>
  );
}
let user = {
  login: false,
  id: "dw",
  pw: "1234",
  nickname: "june",
};

function Login() {
  const [id, setId] = useState("");
  const [pw, setPw] = useState("");

  const handleLoginSubmit = (e) => {
    e.preventDefault();
    if (id === "") {
      alert("아이디를 입력하지 않았습니다.");
    } else if (pw === "") {
      alert("패스워드를 입력하지 않았습니다.");
    } else {
      if (id === user.id && pw === user.pw) {
        alert("로그인 성공");
        user.login = true;
      } else {
        alert("잘못된 정보");
      }
    }
    console.log(user.login);
  };

  const handleLoginInput = (e) => {
    setId(e.target.value);
  };

  const handlePasswordInput = (e) => {
    setPw(e.target.value);
  };

  return (
    <form onSubmit={handleLoginSubmit}>
      <label>
        아이디 : <input type="text" onChange={handleLoginInput} />
      </label>
      <br />
      <label>
        비밀번호 :
        <input type="password" onChange={handlePasswordInput} />
      </label>
      <button type="submit">로그인</button>
    </form>
  );
}

export default App;