Tanstack query trigerring twice when the select is being passed through another custom hook(for filtering the data

[ayushi186]

Hey Community ,
I have been working with React-Query for sometime and came across a scnearion where i needed some filtering of data and manipulation which is being fetched by the react-query .
So , my custom hook for the fetching a transactio from a local json file is as -

export const useTransactions = (select?: any) => useQuery({
queryKey: ["transactions"],
queryFn: () => jsondata?.transactions,
select,
staleTime: Infinity,
});

and the select is being passed by another hook to the about hook via select -

export const useRecurringTransactions = () => {
return useTransactions((data: trans[]) => data.filter((item : any) => item?.recurring === true))
}

now , the select is option here because the usetransaction is being used at other components where i don't need filtered data .
now when i use in my component the "useRecurringTransactions" custom hook it first gives me the data - 14 elements in array (which is correct) but then it resets it all to the [ object , object , object]

project is here - https://github.com/ayushi186/MyfinanceApp/blob/master/src/app/(home)/reccuringbills/page.tsx
and the custom hook is here - https://github.com/ayushi186/MyfinanceApp/blob/master/src/app/customhooks/hooks.ts

Thanks in advance for any pointer or help .

[ayushi186]

also , i have checked many related posts and tried the stale time and also the refectchonmount = false but didn't help me.