Firebase Auth + React - updateProfile throws error "cannot read properties of null (reading getIdToken)" after createUserWithEmailAndPassword

Question

I am currently trying to create an user authentication system with Firebase Authentication and React. I want my users to be able to supply their username (aka displayName) when signing up. Here's the current code for it:

The script with firebase initialization, firebase.js:

import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";

const firebaseConfig = { /* Config information goes here */ };

const app = initializeApp(firebaseConfig);
export const auth = getAuth(app);

The script containing the authentication context and functions related to signing up and updating the profile, AuthContext.jsx:

import { auth } from "../firebase";
import { useState, useEffect, useContext, createContext } from "react";
import {
    createUserWithEmailAndPassword,
    onAuthStateChanged,
    updateProfile
} from "firebase/auth";

const AuthContext = createContext();

export function useAuth() {
    return useContext(AuthContext);
}

export function AuthProvider({children}) {
    const [currentUser, setCurrentUser] = useState();
    const [isLoading, setIsLoading] = useState(true);

    function signup(email, password) {
        return createUserWithEmailAndPassword(auth, email, password);
    }

    function updateInformation(name) {
        return updateProfile(currentUser, {displayName: name});
    }

    useEffect(() => {
        const unsubscriber = onAuthStateChanged(auth, (user) => {
            setIsLoading(true);
            setCurrentUser(user);
            setIsLoading(false);
        });
        return unsubscriber;
    }, []);

    const value = {
        currentUser,
        signup,
        updateInformation
    }

    return (
        <AuthContext.Provider value={value}>
            {!isLoading && children}
        </AuthContext.Provider>
    );
}

The script containing the signing up page, Signup.jsx:

import { useState } from "react";
import { useAuth } from "../contexts/AuthContext";

function Signup() {
    const [email, setEmail] = useState("");
    const [password, setPassword] = useState("");
    const [username, setUsername] = useState("");
    const {signup, updateInformation} = useAuth();

    async function handleSubmit(e) {
        e.preventDefault();
        try {
            await signup(email, password);
            await updateInformation(username); // Error happens here
        } catch (error) {
            console.log(error.message);
        }
    }
    
    return (
        <div>
            <h1>Create an account</h1>
            <form onSubmit={handleSubmit}>
                <input type="text" value={username} onChange={(e) => setUsername(e.target.value)} placeholder="Username"/>
                <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} placeholder="Email"/>
                <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} placeholder="Password"/>
                <input type="submit" value="Sign up"/>
            </form>
        </div>
    );
}

export default Signup;

The idea behind this code is that first the createUserWithEmailAndPassword function will be called, signing the user up and automatically signing them in. This will fire the callback function in onAuthStateChanged, which updates the currentUser state. Then the updateProfile function will be called, changing the displayName of the account held by currentUser. At least, this is what I thought would happen. However, when the code is run, an error is thrown by updateProfile saying that currentUser is null. Why is this happening?