Почему я продолжаю получать эту ошибку из-за хука useQuery response-query? TypeError: невозможно прочитать свойство 'catch' неопределенного

Question

Я продолжаю получать следующую ошибку при попытке использовать axios и useQuery для отправки почтового запроса на сервер. Мой код выглядит следующим образом:

import React, { useState } from 'react';
import SearchField from '../../components/Searchfield';
import { Container } from 'react-bootstrap';
import axios from 'axios';
import { useQuery } from 'react-query';
import getHostUrl from '../../../../util/getHostUrl';
import Product from '../Product';

const Home = () => {
    const [ searchString, setSearchString ] = useState( '' );
    const [ searchMode, setSearchMode ] = useState( false );
    const { 
        productSearchStatus, 
        productSearchData, 
        productSearchIsFetching, 
        productSearchError
    } = useQuery( 'products', getProducts );

    /**
     * Searches for products whose name matches a search text
     * @param { String } searchString The text to use to search for a product
     * @return { Object } The search results
     */
    const getProducts = async () => {
            
            const res = await axios( {
                method: 'post',
                url: `${ getHostUrl() }/product/search`,
                data: { name: searchString },
                headers: { 'Content-Type': 'application/json' }
            } );

            return res;
        
    }

    const displaySearchedProducts = ( product, index ) => {
        console.log( 'is fetching = ' + productSearchIsFetching );
        productSearchIsFetching ? 
            <Product product={ product } key={ index } />
        :
            <></>

    }

    /**
     * Searches for a product
     * @param { Object } event an event that has been fired
     * @return { void }
     */
    const handleProductSearch = async ( event ) => {
        event.preventDefault();
        const form = event.currentTarget;
        setSearchString( form.value );
        setSearchMode( true );
        console.log( 'search mode= ' + searchMode );
        console.log( 'Search String= ', form.value );
        
    }

    return ( 
        <Container className='home-container' >
            {
                searchMode ? 
                    <>
                        <SearchField handleProductSearch={ handleProductSearch } />
                        { displaySearchedProducts() }
                    </>
                :
                    <>
                        <h5 className='home-title gi-heading' > Find Products Near You </h5>
                        <SearchField handleProductSearch={ handleProductSearch } />
                    </>
            }
            
            
        </Container> 
    );
}

export default Home;

ПРИМЕЧАНИЕ. Компонент SearchField мало что делает, но вызывает функцию handleProductSearch, когда текстовое поле ввода для поиска активирует событие onChange.

Ошибка, которую я получаю в консоли браузера, выглядит следующим образом:

Uncaught (in promise) TypeError: Cannot read property 'catch' of undefined
    at QueryObserver.fetch (index.js:44001)
    at QueryObserver.optionalFetch (index.js:44015)
    at QueryObserver.subscribe (index.js:43924)
    at index.js:45636
    at commitHookEffectListMount (index.js:35811)
    at commitPassiveHookEffects (index.js:35849)
    at HTMLUnknownElement.callCallback (index.js:16268)
    at Object.invokeGuardedCallbackDev (index.js:16317)
    at invokeGuardedCallback (index.js:16372)
    at flushPassiveEffectsImpl (index.js:38933)

Пожалуйста, помогите мне понять, где я мог ошибиться.