Invalid hook call error with react async select

Question

Invalid hook call. Hooks can only be called inside of the body of a function component.

I am trying to create a hook to load options in react-select. Here's my code -

import React, { useEffect } from "react";
import { useDispatch } from 'react-redux';

import {isEmpty, generateMenuEndPoint} from '../../helper/commonFunc';
import AsyncSelect from 'react-select/async';

import {searchMenuAction} from '../../app/actions/appAction';

export function AsyncSelectHooks(props) {
    const { index, formElement, isClearable, multiSelect, isDisabled, defaultOptions, parent, searchMenuDetails } = props;
    let { handleSelectInputChange, handleSelectChange, getOptionValue } = props.parent;

    const useFetchMenu = (searchItem) => {
        const dispatch = useDispatch();

        useEffect(() => {
                if(!isEmpty(searchMenuDetails)) {
                    let menuDetails = generateMenuEndPoint(searchMenuDetails, searchItem);

                    return new Promise((resolve, reject) => {
                        dispatch(searchMenuAction(menuDetails, (response) => {
                            resolve(response[menuDetails.getData]);
                        }));
                    })
                }
        }, [])
    }

    return (
        <AsyncSelect
            name={index}
            getOptionValue={getOptionValue}
            getOptionLabel={(option) => (formElement.elementConfig.name === "organizations") && parent.authorizationDetails && parent.authorizationDetails.organizationId < 1000 && option.type  ? (option.label || option.name) + ' ('+option.type+')' : (option.label || option.name || option.prefix)}
            value={formElement.value}
            placeholder=""
            isClearable={isClearable}
            isMulti={multiSelect}
            isDisabled={isDisabled}
            closeMenuOnSelect={multiSelect ? false : true}
            cacheOptions={true}
            defaultOptions={defaultOptions}
            loadOptions={(inputValue) => useFetchMenu(inputValue)}
            onChange={handleSelectChange}
            onInputChange={(value) => handleSelectInputChange(value, index)}
    />
    );
}

Always getting invalid hook call error. I think calling fetchMenu hook from loadOptions is causing the error. But I couldn't find any fix so far.

Any help would be greatly appreciated.

Edit:

Solved my problem by moving out my code outside useEffects.

    const dispatch = useDispatch();
    const fetchMenu = (searchItem) => {
            if(!isEmpty(searchmenudetails)) {
                let menuDetails = generateMenuEndPoint(searchmenudetails, searchItem);

                return new Promise((resolve, reject) => {
                    dispatch(searchMenuAction(menuDetails, (response) => {
                        resolve(response[menuDetails.getData]);
                    }));
                })
            }
        }

I think useEffect is not required here.