How to use useQuery axios call in a reusable component?

[CzechCoder]

I'm making an e-shop that has a Row component for each row of products category (e.g. men, women, accessories) and each Row component has a useQuery axios call in it. The row receives a category name as a props variable that I use in the queryKey, like:
const { data: products } = useQuery<Product[]>({
queryKey: ['getProducts', category],
queryFn: () => getProducts(category),
});

But when I insert two or three of these Rows in the homepage and each one is calling for a different category, the data returning from the API gets mixed up, appearing at random in a row where it doesn't belong. I'd also like to add that the API receives the query params in the correct order and the data also returns in the correct order according to the network tab.

Any explanation and workound for this?

[TkDodo]

Nope, would need to see a reproduction