React: Why does the value of my input not update, but outputting the same same state to the page or console does?

Here is my code:

import { useState } from "react";

const Testing = () => {
    const [testa, setTesta] = useState({ Nickname: "Testing" });
    
    return (
        <>
            <button type="button" onClick={(e) => setTesta({})}>Add</button>
            <input type="text" value={testa?.Nickname} onChange={e => setTesta({ Nickname: e.target.value })} />
            <p>Output: {testa?.Nickname}</p>
        </>
    );
};
export default Testing;

When the page initially loads the textbox value and the text below it both reflect the correct Nickname value.

When I type into the textbox the Nickname is correctly updated in both places.

When I click the Add button to reassign the state to an empty object, the output correctly disappears, but the textbox value remains unchanged.

What causes the difference between the input value and the plain text in this case?