How to refetch data for a query when a mutation is performed in a different component?

import { api } from "~/utils/api";

const {
    data: joinRequestStatus,
    isLoading: isLoadingJoinRequestStatus,
    refetch: refetchJoinRequestStatus,
  } = api.leagueUserManagement.getJoinRequestStatus.useQuery(
    {
      leagueSlug: league.leagueSlug,
    },

    {
      queryKey: [
        "leagueUserManagement.getJoinRequestStatus",
        { leagueSlug: league.leagueSlug },
      ],
      staleTime: 5 * (60 * 1000),
      cacheTime: 10 * (60 * 1000),
    }
  );

import { api } from "~/utils/api";

const utils = api.useContext();

const { mutate: declineJoinRequest, isLoading: isLoadingDeclineJoinRequest } =
  api.leagueUserManagement.declineJoinRequest.useMutation({
    onSuccess: async () => {
      toast({
        title: "Success",
        description: "Join request declined",
        variant: "success",
      });
      await refetchJoinRequests();
      await utils.leagueUserManagement.getJoinRequestStatus.invalidate();
    },
    onError: (error) => {
      toast({
        title: "Error",
        description: error.message,
        variant: "error",
      });
    },
  });