Hey! I am trying to implement a component that switches between react-query and meilisearch based on some conditions.

TableComponent.tsx:
https://gist.github.com/imprakharshukla/87897330d0e7786097a01136220f2667#file-tablecomponent-tsx

ActionPanel.tsx:
https://gist.github.com/imprakharshukla/87897330d0e7786097a01136220f2667#file-actionpanel-tsx

This is the hook that I am using for state:
https://gist.github.com/imprakharshukla/87897330d0e7786097a01136220f2667#file-use-filter-tsx

The Issue:

Whenever searchTerm or shipStatus or paymentStatus is changed by setting up a filter, useEffect is fired that inturn fires the meilisearch. Now the issue appears when I call setOrderData inside that function.

Now the component re-renders infinitely.

I have tired and tired but could not understand why is this happening when only the orderData is updated and the useEffect does not have orderData in it's dep. array.