Using Firebase v9, how can I add the user to the user collection upon logging in with gmail?

How can I add a user to the users collection logging in with Gmail?
I tried the addUser but it does not work. I’m quite new to Firebase v9

//firebase
    import { signInWithPopup, GoogleAuthProvider } from "firebase/auth";
    import { auth, signInWithGoogle, db } from "../../Firebase/utils";
    import { doc, setDoc, collection } from "firebase/firestore";

const Login = (props) => {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");

  const addUser = async () => {
    const userRef = doc(db, "users", auth.currentUser);
    setDoc(userRef);
  };

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

  const googleHandler = async () => {
    signInWithGoogle.setCustomParameters({ prompt: "select_account" });
    signInWithPopup(auth, signInWithGoogle)
      .then((result) => {
        // This gives you a Google Access Token. You can use it to access the Google API.
        const credential = GoogleAuthProvider.credentialFromResult(result);
        const token = credential.accessToken;
        // The signed-in user info.
        const user = result.user;
        // redux action? --> dispatch({ type: SET_USER, user });
        addUser();
        console.log(auth.currentUser, "login page");
      })
      .catch((error) => {
        // Handle Errors here.
        const errorCode = error.code;
        const errorMessage = error.message;
        // The email of the user's account used.
        const email = error.email;
        // The AuthCredential type that was used.
        const credential = GoogleAuthProvider.credentialFromError(error);
        // ...
      });
  };

  return (
    <>
        <form>
           <Button onClick={googleHandler}>Login with Gmail</Button>
        </form>
    </>
  );
};

export default Login;

These are my package.json just to be sure:

enter image description here