React Query useQuery hook automatically closes dialog for some reason

Question

I have this rather simple hook.

import { fetchBanks } from "@/api/banks";
import { useQuery } from "react-query";

export const useBanks = () => {
  return useQuery({ queryKey: ["banks"], queryFn: fetchBanks });
};

now i want to use this hook in a shadcn/ui dialog component like this.

import { editBank } from "@/api/banks";
import { Bank } from "@/types/GlobalTypes";
import { AxiosError } from "axios";
import { SubmitHandler, useForm } from "react-hook-form";
import toast from "react-hot-toast";
import { Button } from "../ui/button";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "../ui/dialog";
import { Input } from "../ui/input";
import { useBanks } from "@/hooks/useBanks";

export const EditBankModal = ({ bank }: { bank: Bank }) => {
  const form = useForm<Bank>({ defaultValues: { ...bank } });
  const { handleSubmit, register } = form;

  const { refetch } = useBanks();

  const onSubmit: SubmitHandler<Bank> = async (data) => {
    await toast.promise(editBank(data), {
      error: (err: AxiosError<{ status: string; message: string }>) => (
        <b>{err.response?.data.message}</b>
      ),
      loading: "editing",
      success: "success",
    });
    refetch();
  };

  return (
    <Dialog>
      <DialogTrigger asChild>
        <Button variant="default">Edit</Button>
      </DialogTrigger>
      <DialogContent className="sm:max-w-[425px]">
        <DialogHeader>
          <DialogTitle>Edit {bank.bank_name}</DialogTitle>
          <DialogDescription>
            Once you are done click save changes.
          </DialogDescription>
        </DialogHeader>
        <form onSubmit={handleSubmit(onSubmit)}>
          <div className="my-5">
            <p className="text-sm font-semibold">Bank name</p>
            <Input
              type="text"
              placeholder="bank name"
              {...register("bank_name")}
            />
            <p className="text-sm font-semibold mt-5">Bank code</p>
            <Input
              type="number"
              placeholder="bank code"
              {...register("bank_code")}
            />
          </div>
          <DialogFooter>
            <Button type="submit">Submit</Button>
          </DialogFooter>
        </form>
      </DialogContent>
    </Dialog>
  );
};

Now each time i trigger the dialog to open it opens then closes immediately . But when i remove the hook or comment it out. the dialog works fine.

When i inspect the network tab i noticw when i trigger the modal react keeps fetching the "data" infinitely for some reason.

What might i be doing wrong? Maybe is it a react-query issue or a dialog error? Somebody help.