I think the issue is that the swiperElRef element doesnt exist yet because its still waiting for isLoading to turn false. Is there a way to make useEffect trigger after the component has mounted?

  useEffect(() => {
    swiperElRef.current.swiper.slideTo(currentPanel);
  }, [currentPanel]);

  const {
    isLoading,
    error,
    data: agencies,
  } = useQuery({
    queryKey: ['agencyData'],
    queryFn: () => {
      try {
        return api.get('/agents');
      } catch (e) {
        console.log(e.message);
      }
    },
  });
if (isLoading) return (<Loading />);

  return (
    <swiper-container class={'swiper'} slides-per-view="1" allow-touch-move={'false'} ref={swiperElRef}>
      <swiper-slide>Slide</swiper-slide>
      <swiper-slide>Slide</swiper-slide>
    </swiper-container>