Register Component Problem

import React, {
  Fragment,
  useContext,
  useState,
  useMemo,
  useCallback,
} from "react";
import { useParams } from "react-router-dom";
import { AuthContext } from "../../shared/context/AuthContext";

import Card from "../../shared/components/UIElements/Card";

import "./Register.css";

const Register = () => {
  const [isLoginMode, setIsLoginMode] = useState(false);            // state creation
  const auth = useContext(AuthContext);
  const registerSubmitHandler = () => {
    auth.login();
  };

  if (window.location.pathname.toString() === "/login") {           // attempt to determine if we should present signup or login
    setIsLoginMode(true);
  } else {
    setIsLoginMode(false);
  }

  return (
    <Card className="authentication">
      <h1>{!isLoginMode ? "signup mode" : "login mode"}</h1>        // result of login or signup mode
      <div>
        <label>Email</label>
        <input type="text" />
        <label>Password</label>
        <input type="text" />
        <button onClick={registerSubmitHandler}>Register</button>
	<button onClick={setIsLoginMode(!isLoginMode)}>Switch mode</button>   // supposed to change modes within the component
      </div>
    </Card>
  );
};

export default Register;