Что происходит с inputs в этом коде? | React

Прошу объяснить следующее: я не до конца понимаю что происходит с inputs в этом коде?

1. В return в input поле value почему там используется inputs.nickname, а не просто nickname?

2. Как в inputs передаются значения?

function MultipleInputs() {
    const [inputs, setInputs] = useState({});

    const handleChange = (event) => {
        const name = event.target.name;
        const value = event.target.value;
        setInputs(values => ({...values, [name]: value}))
    }

    const handleSubmit = (event) => {
        event.preventDefault();
        
        const {username, surname} = inputs;

        alert(`Username: ${username}\nSurname: ${surname}`);
    }

    return (
        <form onSubmit={handleSubmit}>
            <label>
            Enter your name:
            <input 
                type="text" 
                name="username" 
                placeholder='Name'
                value={inputs.username || ""} 
                onChange={handleChange}
            />

            </label>
            
            <br />
            
            <label>
            Enter your surname:
            <input 
                type="text"
                placeholder="Surname"
                name="surname"
                value={inputs.surname || ""}
                onChange={handleChange}
            />
            </label>
            <input type="submit" value="submit" />
        </form>
    );
}

const MFRoot = ReactDOM.createRoot(document.querySelector("#MFRoot"));
MFRoot.render(<MultipleInputs />);