React Hook “useGetCatalogueDataByIdQuery” is called conditionally. React Hooks must be called in the exact same order in every component render

I have this component where i don’t want to all api unless Catalogue id exists

const GeneralInfoForm = ({ currentStep, setCurrentStep }: GeneralInfoFormValues) => {
  const user = getCurrentUser();
  const dispatch= useAppDispatch()
  // Mutation hook for adding catalogue info
  const [addCatalogueInfoMutation, { isLoading }] = useAddCatalogueInfoMutation();
  const CatalogueIdFromStore=useAppSelector((state)=>state.catalogueId.id)
  const { data} = CatalogueIdFromStore && useGetCatalogueDataByIdQuery({ catalogueId:CatalogueIdFromStore,queryParams:'' });
  console.log(data,"from general info")

but it says

React Hook "useGetCatalogueDataByIdQuery" is called conditionally. React Hooks must be called in the exact same order in every component render.eslintreact-hooks/rules-of-hooks
(alias) useGetCatalogueDataByIdQuery<UseQueryStateDefaultResult<QueryDefinition<any, BaseQueryFn<FetchArgs, BaseQueryApi, DefinitionType>, "brand" | "draftsTask" | "allEmployees", any, "baseApi">>>(arg: any, options?: (UseQuerySubscriptionOptions & UseQueryStateOptions<...>) | undefined): UseQueryHookResult<...>
import useGetCatalogueDataByIdQuery

how can i solve this problem?