Firebase `displayName` returns Null - React JS

Question

I use React js Material UI, when I call currentUser.displayName it returns null and when I call currentUser.email it works fine for me.

Here's the function to register a new account to firebase and to update the displayName value from a textFiled which is firstName and lastName :

const firstNameRef = useRef();
const lastNameRef = useRef();
const emailRef = useRef();
const passwordRef = useRef();

const registerHandler = async (e) => {
    e.preventDefault();

    const firstName =
      firstNameRef.current.value.charAt(0).toUpperCase() +
      firstNameRef.current.value.slice(1);
    const lastName =
      lastNameRef.current.value.charAt(0).toUpperCase() +
      lastNameRef.current.value.slice(1);

    const fullName = `${firstName} ${lastName}`;
    const email = emailRef.current.value;
    const password = passwordRef.current.value;

    // password verification
    if (password.length < 6) {
      setPasswordError("Password must be at least 6 digits!");
      return;
    }

    // create account
    try {
      setLoading(true);
      setIsError("");
      setEmailError("");
      setPasswordError("");

      await register(email, password)
        .then((response) => {
          response.user.updateProfile({
            displayName: fullName,
          });

          setIsError("");
          setEmailError("");
          setPasswordError("");
        })
        .catch((error) => {
          setEmailError(
            "The email address is already in use by another account."
          );
        });
    } catch {
      setIsError("Error Creating your Account!");
    }

    setLoading(false);
    setSnackBarOpen(true);
  };

and here's context code which wraps the app component:

const AuthContext = createContext(null);

export const AuthProvider = ({ children }) => {
  const [currentUser, setCurrentUser] = useState();
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const unsubscribe = auth.onAuthStateChanged((user) => {
      setCurrentUser(user);
      setLoading(false);
    });
    return unsubscribe;
  }, []);

  const login = async (email, password) => {
    await auth.signInWithEmailAndPassword(email, password);
  };

  const register = async (email, password) => {
    await auth.createUserWithEmailAndPassword(email, password);
  };

  const logout = async () => {
    await auth.signOut();
  };

  const resetPassword = async (email) => {
    await auth.sendPasswordResetEmail(email);
  };

  return (
    <AuthContext.Provider
      value={{ currentUser, login, register, logout, resetPassword }}
    >
      {!loading && children}
    </AuthContext.Provider>
  );
};

export const useAuth = () => {
  return useContext(AuthContext);
};

and here's my first name & last name TextFields in JSX:

            <TextField
              fullWidth
              label="First Name"
              disabled={loading}
              type="text"
              required
              inputRef={firstNameRef}
            />

            <TextField
              fullWidth
              disabled={loading}
              label="Last Name"
              type="text"
              required
              inputRef={lastNameRef}
            />

Answer 1

Looks like the problem is here:

const register = async (email, password) => {
    await auth.createUserWithEmailAndPassword(email, password);
  };

You are not returning the response from here so you should do this instead:

const register = async (email, password) => {
    return await auth.createUserWithEmailAndPassword(email, password);
};