Component doesn't render after rerouting

I have an issue where when I enter a valid email and set the status of logged to true, the component redirects, but doesn't render. I have my app wrapped in BrowserRouter. The address bar shows the correct path but nothing renders.

function App() {
  const [savedEmail, setSavedEmail] = useState(localStorage.getItem("email"));
  const [loggedIn, setLoggedIn] = useState(localStorage.getItem("logged"));
  return (
    <>
      <PropContext.Provider value={{ loggedIn, setLoggedIn, setSavedEmail }}>
        <Header />
        <Switch>
          <Route
            exact
            path="/"
            render={() => {
              return loggedIn ? (
                <Redirect to="/users" />
              ) : (
                <Redirect to="/login" />
              );
            }}
          ></Route>
          {loggedIn ? (
            <Redirect to="/users" />
          ) : (
            <Route exact path="/login" component={Login} />
          )}

          {loggedIn ? (
            <Route exact path="/users" component={Users} />
          ) : (
            <Redirect to="/login" />
          )}
        </Switch>
      </PropContext.Provider>
    </>
  );
}

this is the login page that handles state update, it should update the state of app and redirect to /users, which it does but it doesn't render it.

function Login() {
  const [email, setEmail] = useState("");
  const [validEmail, setValidEmail] = useState(false);
  const { loggedIn, setLoggedIn, setSavedEmail } = useContext(PropContext);

  const handleClick = () => {
    if (!localStorage.getItem("email")) {
      setSavedEmail(email);
      localStorage.setItem("email", email);
      setLoggedIn(true);
      localStorage.setItem("logged", true);
      console.log("if");
    } else if (localStorage.getItem("email") === email) {
      setLoggedIn(true);
      localStorage.setItem("logged", true);
      console.log("else if");
    }
  };

  const emailIsValid = () =>
    /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(
      email
    );

  useEffect(() => {
    emailIsValid(email) ? setValidEmail(true) : setValidEmail(false);
  }, [email]);
  return (
    <div>
      <input
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        type="email"
        name="email"
        id="email"
        required
      />
      <button disabled={!validEmail} onClick={() => handleClick()}>
        Log in
      </button>
    </div>
  );
}