Защищенный маршрут перенаправляется до получения ответа API

Question

Я использую защищенный маршрут, чтобы перенаправить пользователя на страницу подписки, если подписка закончена. Но Route не ждет ответа API, чтобы прибыть.

const ProtectedRoute = ({ component: Component, ...rest }) => {
  const { subscriptionData = {} } = useContext(AppContext) || {};
  return (
    <Route
      render={(props) => {
        if (subscriptionData && subscriptionData.active) {
          return <Component {...props} />;
        }
        return <Redirect to={`${ROUTE_PREFIX}/settings/billing`} />;
      }}
      {...rest}
    />
  );
};

Вызов API происходит в действии -

export const getSubscription = () => async (dispatch) => {
  const url = `/subscription/`;
  await handleAjaxCalls(dispatch, 'GET', url, null, GET_SUBSCRIPTION);
};

Вызов API выполняется из файла useEffect() из App.js. Когда происходит вызов API, subscriptionData пусто {}, перенаправление происходит на страницу ${ROUTE_PREFIX}/settings/billing. Любая помощь, чтобы ограничить это будет высоко ценится.