one useState for multiple inputs Good article how to control multiple inputs with React without creating state variable for every input field.
function Component() {
const [values, setValues] = useState({ first: '', last: '', age: '' })
const updateValues = (e) => setValues({ ...values, [e.target.name]: e.target.value })
return (
<>
<input type="text" name="first" value={values.first} onChange={updateValues} placeholder='first name' /> <br />
<input type="text" name="last" value={values.last} onChange={updateValues} placeholder='last name' /> <br />
<input type="number" name="age" value={values.age} onChange={updateValues} placeholder='age' /> <br />
<div><h5>{'values state object: '}</h5>{JSON.stringify(values)}</div>
</>
)
}