Calling API between React Navigation events

I am trying to set up an authentication flow using React Navigation where the app loads the appropriate stack according to the redux state. If auth.isAuthenticated I would like to call fetchBusiness() but during this call the loading screen should render.

The problem I am having is that the fetchBusiness() function keeps re-rendering.

const NavigationStack = () => {
  const auth = useSelector((state) => state.auth);
  const business = useSelector((state) => state.business);
  const dispatch = useDispatch();
  //  In general, it's best and safest to load fonts from
  // your local assets. -Expo
  let [fontsLoaded] = useFonts({
    Metropolis: require("./assets/fonts/metropolis.regular.otf"),
  });

  useTokenVerify();

  if (!fontsLoaded || auth.isLoading || business.isLoading) {
    return <LoadingScreen />;
  }

  if (auth.isAuthenticated && !business.isLoading) {
    dispatch(fetchBusiness());
  }

  return (
    <NavigationContainer>
      {!auth.isAuthenticated ? (
        <AuthFlow />
      ) : business.business.status === "succeeded" && business.business.count === 0 ? (
        <RootNavigationStack initialRouteName={"BusinessProfile"} />
      ) : business.business.count === 1 ? (
        <RootNavigationStack initialRouteName={"BottomTabFlow"} />
      ) : (
        <AuthFlow />
      )}
    </NavigationContainer>
  );
};

How can I fix this? I have tried useLayoutEffect which, as I understand, calls the function after the the component fully mounts, to no avail.