userEvent.type not updating value of input in test

I am testing this component, which is simply changing its state depending on new input into the input field and setting the value of the input element to that state.

function Login () {
    //Login Credentials
    const [loginCredentials, setLoginCredentials] = useState({ name: '', password: '' });

    const handleChange = ({target}) => {
        setLoginCredentials(prev => ({ ...prev, [target.name]: target.value }));
    }

    return (
            <div className="login-container">
                <h1>Log In</h1>
                    <div className="login-label-input">
                        <label htmlFor="name">Account Name
                            <input
                            type="name"
                            id="name"
                            name="name"
                            placeholder="Enter Name"
                            onChange={handleChange}
                            value={loginCredentials.name}
                            aria-label="name"
                            />
                        </label>
                  </div>
             </div>
    )
}

and for some reason this test does not show the value of input to be "testUser" in screen.debug()....

test("log in with empty name input returns error message", async () => {
        loginRender();
        const nameField = screen.getByLabelText(/account name/i);
        await userEvent.type(nameField, "testUser"); 
        screen.debug()
    });

Shouldn't this work? Why doesn't it?