Обновление двух разных полей с помощью Enzime Mount

Question

Я создал компонент, который меняет заголовок документа всякий раз, когда пользователь меняет одно из этих полей - имя и фамилию.

Затем, пытаясь написать контрольный пример для этого сценария, я попробовал следующее решение (имитирующее событие изменения в каждом из полей ввода):

import React from 'react';
import ReactDOM from 'react-dom';
import ComponentToBeTested from './ComponentToBeTested';

import Enzyme, {mount} from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

Enzyme.configure({adapter: new Adapter()});

it('Should update page title to the value of the inputs ( name + lastName) when it changes', ()=>{
  const wrapper = mount(<ComponentToBeTested />);
  const name = wrapper.find('#name');
  const lastName = wrapper.find('#lastName');
  name.simulate('change', { target: { value: 'Always' } });
  lastName.simulate('change', { target: { value: 'Test' } });
  
  expect(document.title).toBe('Always Test');
});

Однако этот тест не пройден с сообщением: Ожидается: «Всегда тестировать» |Получено: «Всегда первый»

Кажется, обновляется только первое значение.

Я что-то упустил?Заранее спасибо.

пс .: Код моего компонента:

import React, { useState, useEffect } from 'react';

export default function ConponentToBeTested () {

    const name = useFormInput('Test')
    const lastName = useFormInput('First');

    useDocumentTitle(name.value + ' ' + lastName.value);
    
    return (
        <div className="component-to-be-tested">
            <input id="name" {...name}  />
            <input id="lastName" {...lastName} />
        </div>
    )
}
function useDocumentTitle(title) {
    useEffect(() => {
      document.title =  title;
    });
  }
  
  function useFormInput (initialValue) {
    const [value, setValue] = useState(initialValue);
  
    function handleChange(e) {
      setValue(e.target.value);
    }
  
    return {
      value,
      onChange : handleChange
    }
  }