Why does react user-event type and react-hook-form fail?

Question

I am using react-testing to test typing into the input field that uses react-hook-form

Here is my test setup:

import { render, screen, waitFor } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import selectEvent from 'react-select-event';

describe('Should be able to type into the form fields', () => {

  it('should display Flash when typed in the title field ', () => {
    render(<ProjectForm />);
    userEvent.type(screen.getByRole('textbox', { name: 'Series title' }), 'Flash');
    expect(screen.getByRole('textbox', { name: 'Series title' })).toHaveValue('Flash');
  });

});

Here is the error that I am getting:

  ● Should be able to type into the form fields › should display Flash when typed in the title field 

    expect(element).toHaveTextContent()

    Expected element to have text content:
      Flash
    Received:

      46 |     render(<ProjectForm />);
      47 |     userEvent.type(screen.getByRole('textbox', { name: 'Series title' }), 'Flash');
    > 48 |     expect(screen.getByRole('textbox', { name: 'Series title' })).toHaveTextContent('Flash');
         |                                                                   ^
      49 |   });
      50 | });
      51 |

I have used register from react-hook-form to handle the values when typed.

Here is the input component inside <ProjectForm/>.

          <InputField
              className="col-span-1"
              label="Series title"
              type="text"
              placeholderText="Series title"
              registration={register('title')}
              error={errors.title?.message}
            />