React-query doesn't refresh the component - reactjs

Question

I've got a problem with react-query. I've got a component which includes components that show a loading spinner if the integrationDetails query is fetching. But when the query finishes fetching, my component doesn't update at all. I tried creating state and then using that, but the problem persits.
UPDATE: The component does in fact update, but the child component doesn't.
...
const currentWorkspace = useGetCurrentWorkspaceDetail();
const integrationDetails = useGetIntegrationDetails();
useEffect(() => {
integrationDetails.refetch(); //force refetch the query whenever I enter the page.
//problem persists even if I comment this part out
}, []);
useEffect(() => {
console.log(integrationDetails.isFetching); //this logs true and then false.
}, [integrationDetails]);
if (currentWorkspace.isLoading) {
return (
<div className={styles.layout}>
<LoadingSpinner />
</div>
);
}
return (
<div className={styles.layout}>
<div className={styles.rest}>
<div className={styles.column}>
<Card>
<CardTabs tabs={["1"]}>
<div>
<h3>Global Tracking Code</h3>
<div style={{ marginTop: 12 }}>
<StatusStripe
isLoading={integrationDetails.isFetching}
...
/>
</div>
...

Answer 1

Your first useEffect would be just like componentDidMount and it will only be called on first render as you have passed an empty list i.e [] in its second argument.
You could have written your logic in your second useEffect where you know when the data is fetched and you can do your state setting or binding there.