I have the following code, simply want to update the text value on input field change.

```js
import React, { useState } from 'react';
const Form = () => {
    const initialState = {
        name: 'John',
        age: 25
    };
    const [{ name, age }, setFormState] = useState(initialState);

    const handleNameChange = (e) => {
        setFormState({
            name: e.target.value
        });
    };

    const handleAgeChange = (e) => {
        setFormState({
            age: e.target.value
        })
    };

    return (
        <>
            <form onSubmit={(e) => e.preventDefault()}>
                <label htmlFor='name'>Name: </label>
                <input type='text' id='name' name='name' placeholder={name} onChange={handleNameChange} />
                <p>The person's name is {name}.</p>
                <br />
                <label htmlFor='age'>Age: </label>
                <input type='text' id='age' name='age' placeholder={age} onChange={handleAgeChange} />
                <p>His/her age is {age}.</p>
            </form>
        </>
    )
}

export default Form;
```

A working example here: <https://codesandbox.io/s/react-playground-forked-tskj9?file=/Form.js>

Problem is, when input a value in the name field, age field is cleared, vice versa. I understand that this might be due to the `initialState` is no longer valid after change in the field, but how can I preserve the values in one `<input>` and `<p>` while input in another?