Collecting users' input

Our user form, here, is modeled after a real-world scenario where:

• A user fills out a form, and submits it with a button click
• The button-click saves the user (see invoked function)
• An admin-rights-restricted button, when clicked, triggers the profile creations (see invoked function)

return (
    <div>
        <form onSubmit={addUserToPending}>
            <input
                value={userEmail}
                onChange={(e) => setUserEmail(e.target.value)}
            />
            <input
                value={userCountry}
                onChange={(e) => setUserCountry(e.target.value)}
            />
            <input
                value={userCompany}
                onChange={(e) => setUserCompany(e.target.value)}
            />
            <select
                value={userRole}
                onChange={(e) => setUserRole(e.target.value)}
            >
                <option value="Agent">Agent</option>
                <option value="Admin">Admin</option>
            </select>

            <button type="submit" onClick={addUser}>
                {' '}
                Add User{' '}
            </button>
        </form>

        <button onClick={finishRegistration}>
            {' '}
            Finish Registration & Create Users{' '}
        </button>
    </div>
);