How do I merge the function into the component

function Header() {
  const [user, setUser] = useState(null);

  useEffect(() => {
    firebase.auth().onAuthStateChanged((user) => {
      setUser(user);
    });
  }, []);
  return (
//ADD code her...
<div>
    <h1>
      Hello, <span></span>
      {user.displayName}
    </h1>
    
     auth.signOut()}>
      Sign out
    
  </div>
    <menu secondary="">
      <menu.menu position="right">
        <div>{user ? <home user="{user}"> : <login>}</div>
      
    
  );
}

export default Header;