我有一个类，我想更新状态中personalInformation对象的属性，而不影响其他未指定的属性。

class Main extends Component
{
    constructor()
    {
        super();

        this.state = {
            personalInformation: {
                firstName: '',
                lastName: '',
                title: '',
                email: '',
                address: '',
                phone: ''
            },
            experience:[
                {
                    position: '',
                    company: '',
                    startDate: '',
                    endDate: '',
                    description: ''
                },
            ]
            
        };
    };

    // This function is meant to update the state
    updatePersonalInfoState = (e) => {
        const name = e.target.name;
        const value = e.target.value;
        this.setState({
            ...this.state.personalInformation,
            [name]: value,
        });
    };

    render()
    {
         const personalInfo = this.state.personalInformation;
        // This renders the form that takes user input
        return(
            <form>
               <input type='text' 
                name='firstName' 
                id='firstname' 
                value={personalInfo.firstName}
                onChange={this.updatePersonalInfoState}
            />
            <label htmlFor='lastname'> Last Name</label>
            <input type='text' 
                name='lastName' 
                id='lastname' 
                value={personalInfo.lastName}
                onChange={this.updatePersonalInfoState}
            />
            <label htmlFor='job-title'> Title</label>
            <input 
                type='text' 
                name='job-title' 
                id='job-title' 
                value={personalInfo.title}
                onChange={this.updatePersonalInfoState}
            />
            <label htmlFor='email'> Email</label>
            <input 
                type='email' 
                name='email' 
                id='email' 
                value={personalInfo.email}
                onChange={this.updatePersonalInfoState}
            />
            <label htmlFor='address'> Address</label>
            <input 
                type='text' 
                name='address' 
                id='address' 
                value={personalInfo.address}
                onChange={this.updatePersonalInfoState}
            />
            <label htmlFor='phone'> Tel</label>
            <input 
                type='tel' 
                name='phone' 
                id='phone'
                value={personalInfo.phone}
                onChange={this.updatePersonalInfoState}
            />
            </form>
        )
    }
}

export default Main;

问题是，当我尝试键入输入时，状态没有改变，因此，输入没有得到更新。
我使用了updateInfoState方法的当前版本，因为以前的版本：

updatePersonalInfoState = (e) => {
        const name = e.target.name;
        const value = e.target.value;
        this.setState({
            personalInformation: {
               [name]: value,
            }
        });
    };

返回了一个只有一个属性的状态，因此它覆盖了personalInformation对象。在我将函数重写为当前函数后，出现了新问题（状态未更新）。
编辑：我在本地代码中包含了一个console.log()，以查看update方法是否被调用，它确实被调用了，但状态拒绝更新。