tRPC querying data via function not working

type SocialMediaData = {
    id: string;
    createdAt: Date;
    updatedAt: Date;
    copySocialMediaType: "HASHTAGS" | "POST";
    copySocialMediaCopy: string;
    organizationId: string;
    themeId: string;
    userId: string;
  };

  const [themeIds, setThemeIds] = useState<string[]>([]);
  const [arrayToStoreSocialData, setArrayToStoreSocialData] = useState<
    SocialMediaData[]
  >([]);

  const {
    data: allCreateSocialsData,
    isLoading: isLoadingCreateSocials,
    error: errorCreateSocials,
  } = api.createSocialPost.getAllCreateSocialPosts.useQuery();

  const fetchAndSetThemeIds = () => {
    try {
      const fetchedThemeIds: string[] | undefined =
        allCreateSocialsData?.map((socialPost) => socialPost.themeId) || [];
      setThemeIds(fetchedThemeIds);
    } catch (error) {
      console.error("Error fetching theme IDs:", error);
    }
  };

  console.log("themeIds", themeIds);

  useEffect(() => {
    fetchAndSetThemeIds();
  }, [allCreateSocialsData]);

  const fetchSocialMediaData = (themeId: string) => {
    try {
      console.log("themeId", themeId);
      const response =
        api.copySocialMedia.getAllSocialMediaCopyOfTheme.useQuery({
          themeId: themeId,
        });

      console.log("response", response);

      const socialMediaData: SocialMediaData[] = response?.data || [];

      setArrayToStoreSocialData((prevData) => [
        ...prevData,
        ...socialMediaData,
      ]);
    } catch (error) {
      console.error("Error fetching social media data:", error);
    }
  };

  useEffect(() => {
    themeIds.forEach((themeId) => {
      fetchSocialMediaData(themeId);
    });
  }, [themeIds]);

  console.log("arrayToStoreSocialData", arrayToStoreSocialData);