I have the code below where I want to implement Firebase Auth, where when you click on the Sign in image you can log in with your Google Account,

But I have an issue : when you log in, the user variable is always null, the redirection from the Google popup never logs the user, so I never see the <p>Sign out</p> section appearing

import { useEffect, useState } from "react";
import { auth } from "../../config/firebase";
import { useAuthState } from "react-firebase-hooks/auth";
import { GoogleAuthProvider, signInWithRedirect } from "firebase/auth";
import { Link } from "react-router-dom";

import imgSignIn from "../../assets/google-btn.png";

function Admin() {
  const [user] = useAuthState(auth);

  const googleSignIn = () => {
    const provider = new GoogleAuthProvider();
    signInWithRedirect(auth, provider);
  };

  const signOut = () => {
    auth.signOut();
  };

  return (
        {!user ? (
          <div className="flex justify-center">
            <img
              onClick={googleSignIn}
              src={imgSignIn}
              alt="sign in with google"
              type="button"
            />
          </div>
        ) : (
          <p onClick={signOut}>Sign out</p>
        )}
  );
}

export default Admin;