Delay in React-hooks with query parameters

I've written a custom react-hook which depends on parameters. I have the parameter changes a delay occurs and the query gets delayed executed.

Has somebody a explanation for this symptom? Whenever the parameter changes (lager, barthlpo_id) it takes very long for the query to be re-executed

Here is my Code:

export default function useChargen({access_token, lager}) {
  console.log('usechargen: ',access_token, lager?.bartlhpo_id);
  return useQuery(['chargen'], async () => {
    console.log(lager?.bartlhpo_id)
    const url = new URL('http://127.0.0.1:3005/api/chargen');
    const params = {bartlhpo_id: lager?.bartlhpo_id }
    url.search = new URLSearchParams(params).toString();
    const response = await fetch(url, {
      method: 'GET',
      headers: new Headers({
        Authorization: `Bearer ${access_token.access_token}`,
      })
    })
    if (!response.ok) {
      throw new Error(response.status);
    }
    const res = await response.json();
    console.log(res);
    return res;
  }, {
    enabled: !!lager?.bartlhpo_id && !!access_token
  })
}
export default function Home() {
  const [sEingang, setSEingang] = useState([]);
  const [sLager, setSLager] = useState("");
  const [menge, setMenge] = useState(0);
  const context = React.useContext(AuthContext);
  const { data: warendata } = useWaren(context.access_token);
  const { data: lagerdata } = useGetLager(context.access_token);
  const methods = useForm({
    resolver: yupResolver(validationShema),
    mode: "all",
  });
  const { getValues, reset } = methods;
  const { data: chargendata, refetch } = useChargen({
    access_token: context.access_token,
    lager: getValues("selWaren"),
  });

  React.useEffect(() => {
    async function getToken() {
      const res = await context.setTokenSilently();
    }
    const interval = setInterval(() => {
      getToken();
    }, 30000);
    return () => clearInterval(interval);
  }, []);
  

  return (
    <>
      <CssBaseline />
      <ButtonAppBar name={"Wareneingänge"} back={false} onClick={reset} />
      <Grid
        container
        spacing={0}
        direction="column"
        alignItems="center"
        justifyContent="center"
        style={{ minHeight: "50vh" }}
      >
        <Grid item xs={3}>
          <FormProvider {...methods}>
            <form>
              <MySelect
                formname={"selWaren"}
                data={warendata}
                name={"Wareneingänge"}
                selected={sEingang}
                setSelected={setSEingang}
                refetch={refetch}
              />

              <MySelect
                formname={"selLager"}
                data={lagerdata}
                name={"Freie Lagerplätze"}
                selected={sLager}
                setSelected={setSLager}
              />

              <MySelect
                formname={"selChargen"}
                data={chargendata}
                name={"Freie Chargenplätze"}
                selected={sLager}
                setSelected={setSLager}
              />
              <FormDialog func={() => {}} menge={menge} setMenge={setMenge} />
            </form>
          </FormProvider>
        </Grid>
      </Grid>
      <div></div>
    </>
  );
}