Running tests in Puppeteer is receiving objects instead of HTML elements with error "received value must be an HTMLElement or an SVGElement."

Im a novice trying to run testing using puppeteer. I want to select the input container in my React app so I can expect a specific value in the field.

This is the element I want to select

<input 
   onChange={this.handleInputChanged} 
   type="text" 
   className="city-search__input"
   placeholder="Search for a City"
   value={query}
   onFocus={() => this.setState({showSuggestions: true})}
   >
</input>

Im using mock data to test that only currently has two events.

This is my current test

test('When a user hasn\'t searched for a city, show upcoming events from all cities.', async () => {
    const searchInput = await page.$('.city-search__input');
    const events = await page.$('.event-item__container');
    expect(searchInput).toHaveValue('');
    expect(events).toHaveLength(2);
});

The problem is when the test is run, it fails at this line

expect(searchInput).toHaveValue('');

with the message, "received value must be an HTMLElement or an SVGElement.", and instead I get an object as my recieved value.

I'm sure that I'm selecting the right HTML element but there may be something I'm missing. I would appreciate any help with this issue.