Возникает ошибка в RTK QUERY, React, в чем может быть ошибка?

Question

laravel_creative_3103 @laravel_creative_3103

React

Возникает ошибка в RTK QUERY, React, в чем может быть ошибка?

const AllServices = () => {
    const navigationPrevRef = React.useRef(null);
    const navigationNextRef = React.useRef(null);
    const { data: popularServies } = useGetPopularServicesQuery();
    const { data: organizations } = useGetOrganizationsQuery();

    const toShowServices = (id: string) => {
        console.log({ id });
        const { data } = useGetServicesByOrgationzationQuery(id); // при клике возникает такая ошибка react-dom.development.js:14906 Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
        console.log('check:', data);
    };

    console.log({ organizations });

    return (
        <div style={{ margin: '0 auto', maxWidth: '1440px' }}>
            <TitleWithSearch title='Услуги' placeholder='Найдите услуги' />
            <div className='slider-suppliers' style={{ marginTop: '80px' }}>
                <Row justify={'space-between'}>
                    <div className='prevSlider' ref={navigationPrevRef}>
                        <img src={prevSlider} alt='' />
                    </div>
                    <div className='nextSlider' ref={navigationNextRef}>
                        <img src={nextSlider} alt='' />
                    </div>
                    <Swiper
                        style={{ marginTop: '20px' }}
                        // @ts-ignore
                        slidesPerView={1}
                        spaceBetween={10}
                        pagination={{
                            clickable: true,
                        }}
                        breakpoints={{
                            640: {
                                slidesPerView: 5,
                                spaceBetween: 50,
                            },
                        }}
                        navigation={{
                            prevEl: navigationPrevRef.current,
                            nextEl: navigationNextRef.current,
                        }}
                        modules={[A11y, Scrollbar, Navigation, Pagination]}
                        onBeforeInit={(swiper) => {
                            if (typeof swiper.params.navigation === 'object') {
                                swiper.params.navigation.prevEl = navigationPrevRef.current;
                                swiper.params.navigation.nextEl = navigationNextRef.current;
                            }
                        }}
                        className='mySwiper'
                    >
                        {organizations?.data.map((item: any) => (
                            <SwiperSlide
                                style={{ cursor: 'pointer' }}
                                key={item?.id}
                                onClick={(e) => {
                                    e.stopPropagation();
                                    toShowServices(item.id);
                                }}
                            >
                                {item?.name}
                            </SwiperSlide>
                        ))}
                    </Swiper>
                </Row>
            </div>

            <div className='services-block'>
                <div className='cards-services'>
                    {popularServies?.map((item) => (
                        <ItemService key={item.id} service={item} />
                    ))}
                </div>
            </div>
        </div>
    );
};

export default AllServices;

Как можно было бы переформулировать функцию?