Home.js

import React from "react";
import Login from "../components/Login";
import Landing from "../Pages/Landing";

function Home(props) {
  const [user, setUser] = useState();
  
  return (
    <div>
      {user ?
         <Landing {...props user={user} /> {/* only needs `user` */}
       :
         <Login {...props setUser={setUser}  /> {/* only needs `setUser` */}
      }
    </div>
  );
}

export default Home;

Login.js

const Login = (props) => {
  const [email, setEmail] = useState();  // << avoid forcing no value to be "" ; embrace `null` as the initial value!
  const [password, setPassword] = useState();
  const [emailError, setEmailError] = useState();
  const [passwordError, setPasswordError] = useState();
  const [hasAccount, setHasAccount] = useState(false);
  
  let { user, setUser } = props;  // copies props.user and props.setUser into local variables

  const clearInputs = () => {
    setEmail(null);
    setPassword(null);
  };

  const clearErrors = () => {
    setEmailError(null);
    setPasswordError(null);
  };

  const handleLogin = () => {
    clearErrors();
    fb.auth()
      .signInWithEmailAndPassword(email, password)
      .then((user) => {
        console.log("user", user);
        props.navigation.push("/Landing");  // << recommend making this a
        // CONSTANT declared in a globally-accessible file.  Otherwise
        // you'll have "/Landing" all over your code and if you change the
        // path you'll have to search/replace everywhere.
      })
      .catch((error) => {
        switch (error.code) {
          case "auth/invalid-email":
          case "auth/user-disabled":
          case "auth/user-not-found":
            setEmailError(error.message);
            break;
          case "auth/wrong-password":
            setPasswordError(error.message);
            break;
        }
      });
  };
  const handleSignup = () => {
    clearErrors();
    fb.auth()
      .createUserWithEmailAndPassword(email, password)
      .catch((error) => {
        switch (error.code) {
          case "auth/email-already-in-use":
          case "auth/invalid-email":
            setEmailError(error.message);
            break;
          case "auth/weak-password":
            setPasswordError(error.message);
            break;
        }
      });
  };

  const authListener = () => {
    fb.auth().onAuthStateChanged((user) => {
      if (user) {
        clearInputs();
        setUser(user);
      } else {
        setUser(null);
      }
    });
  };

  useEffect(() => {
    authListener();
  }, []);

  return (
    <div className='login'>
      <div className='loginContainer'>
        <label>Username</label>
        <input
          type='text'
          value={email}
          autoFocus
          required
          onChange={(e) => setEmail(e.target.value)}
        />
        <p className='errorMsg'>{emailError}</p>
        <label>Password</label>
        <input
          type='password'
          value={password}
          required
          onChange={(e) => setPassword(e.target.value)}
        />
        <p className='errorMsg'>{passwordError}</p>
        <div className='btnContainer'>
          {hasAccount ? (
            <span>
              <button onClick={handleLogin} type='submit'>
                Sign In
              </button>
              <p>
                Don't have an account?
                <span
                  onClick={() => {
                    // Avoid `setX(!x)` ... it is a bad pattern!
                    // See https://reactjs.org/docs/hooks-reference.html#functional-updates
                    // Instead use the following:
                    setHasAccount((currentValue) => !currentValue);
                  }}
                >
                  Sign up
                </span>
              </p>
            </span>
          ) : (
            <>
              <button onClick={handleSignup} type='submit'>
                Sign Up
              </button>
              <p>
                Have an account?
                <span
                  onClick={() => {
                    // Avoid `setX(!x)` ... it is a bad pattern!
                    // See https://reactjs.org/docs/hooks-reference.html#functional-updates
                    // Instead use the following:
                    setHasAccount((currentValue) => !currentValue);
                  }}
                >
                  Sign in
                </span>
              </p>
            </>
          )}
        </div>
      </div>
    </div>
  );
};