Do we need to use act() function with react testing library?

Hi,
Can anybody explain to me the use of act() utility provided by React for testing? In official documentation of React, it is stated that utilities provided by react testing library are wrapped with act() . Can anyone explain which utilities is it talking about? Do I need to use act() with react testing library?
I was testing a component with jest and react testing library, although the test case passed, but I am getting the following error in console

Can anyone explain the above error?

/* Searchbar.js */
// @flow
import React, { useReducer } from 'react';
import SearchIcon from './SearchIcon';
import CloseIcon from './CloseIcon';
import { searchBarReducer } from '../reducers';
import {
    swapLoading,
    updateSearchText,
    updateSuggestions,
    updateLoadedOnce,
} from '../actions';
import { ClipLoader } from 'react-spinners';
import { searchSuggestions } from '../utils/api';
import Suggestion from './Suggestion';
import NoResults from './NoResults';

const Searchbar = () => {
    const [state, dispatch] = useReducer(searchBarReducer, {
        loading: false,
        suggestions: [],
        searchText: '',
        loadedOnce: false,
    });
    return (
        <>
            <div className='container-fluid mt-avoid'>
                <div className='row'>
                    <div className='col px-0'>
                        <div className='px-custom d-flex bg-white border-bottom'>
                            <SearchIcon
                                color='#000000'
                                classes='search-icon-small'
                            />
                            <input
                                type='text'
                                className='form-control mx-2 search-input'
                                placeholder='Search for a movie, tv show, person...'
                                autoFocus
                                onChange={(evt) => {
                                    dispatch(
                                        updateSearchText(evt.target.value)
                                    );
                                    dispatch(swapLoading());
                                    searchSuggestions(evt.target.value).then(
                                        (suggestions) => {
                                            if (suggestions.length > 10)
                                                suggestions = suggestions.slice(
                                                    0,
                                                    10
                                                );
                                            dispatch(
                                                updateSuggestions(suggestions)
                                            );
                                            dispatch(swapLoading());
                                            dispatch(updateLoadedOnce(true));
                                        }
                                    );
                                }}
                            />
                            {state.searchText ? (
                                state.loading ? (
                                    <ClipLoader
                                        size={20}
                                        css='margin-top : 0.8rem;'
                                    />
                                ) : (
                                    <CloseIcon
                                        color='#000000'
                                        classes='close-icon-small ml-3 pointer'
                                        onClick={() => {
                                            dispatch(updateSuggestions([]));
                                            dispatch(updateLoadedOnce(false));
                                        }}
                                    />
                                )
                            ) : null}
                        </div>
                    </div>
                </div>
            </div>
            {state.loadedOnce ? (
                state.suggestions.length > 0 ? (
                    state.suggestions.map((suggestion) => {
                        return (
                            <Suggestion
                                id={suggestion.id}
                                name={suggestion.name}
                                key={suggestion.id}
                            />
                        );
                    })
                ) : (
                    <NoResults />
                )
            ) : null}
        </>
    );
};

export default Searchbar;
/* Searchbar.test.js */
import React from 'react';
import Searchbar from '../atomic/Searchbar';
import { render, fireEvent } from '@testing-library/react';
import { searchSuggestions } from '../utils/api';
import { BrowserRouter as Router } from 'react-router-dom';

jest.mock('../utils/api.js');
beforeAll(() => {
    const suggestions = [
        { id: 1234, name: 'DDLJ' },
        { id: 1235, name: 'Fast and Furious' },
        { id: 1236, name: 'Friends' },
    ];
    searchSuggestions.mockResolvedValue(suggestions);
});

test('user input updates on typing', () => {
    // Arrange
    const { getByPlaceholderText } = render(
        <Router>
            <Searchbar />
        </Router>
    );
    const searchInput = getByPlaceholderText(/search for a movie/i);

    // Act
    fireEvent.change(searchInput, { target: { value: 'Hang' } });

    // Assert
    expect(searchInput.value).toBe('Hang');
});