Checkout::PostPurchase::ShouldRender not being called?

Store Design
1

I’m running the attached code, almost straight from the sample file. But the problem is that the “Checkout::PostPurchase::ShouldRender” is never called. Therefore, I am not able to make any network requests or similar, or even read localStorage. What’s wrong with this?

import {
  extend,
  render,
  useExtensionInput,
  BlockStack,
  Heading,
} from '@shopify/post-purchase-ui-extensions-react';

/** Define any shape or type of data */
interface InitialState {
  postalCode: string | null;
  locale: string;
}

extend('Checkout::PostPurchase::ShouldRender', async (api) => {
  const render = true;

  try {
    console.log('shouldRender');
    const initialState = {
      postalCode: localStorage.getItem('postal_code'),
      locale: api.inputData.locale,
    };
    console.log(initialState);
    console.log(api.inputData);
    const {storage} = api;
    if (render) {
      // Saves initial state, provided to `Render` via `storage.initialData`
      await storage.update(initialState);
      console.log(initialState);
    }
  } catch (err) {
    console.error(err);
  }
  return {
    render,
  };
});

// Simulate results of network call, etc.
async function getRenderData(): Promise
2

Same issue with me as well with using this code:

/**
 * Extend Shopify Checkout with a custom Post Purchase user experience.
 * This template provides two extension points:
 *
 *  1. ShouldRender - Called first, during the checkout process, when the
 *     payment page loads.
 *  2. Render - If requested by `ShouldRender`, will be rendered after checkout
 *     completes
 */
import {
  extend,
  render,
  useExtensionInput,
  BlockStack,
  Button,
  CalloutBanner,
  Heading,
  Image,
  Layout,
  TextBlock,
  TextContainer,
  View,
} from '@shopify/post-purchase-ui-extensions-react';
/**
 * Entry point for the `ShouldRender` Extension Point.
 *
 * Returns a value indicating whether or not to render a PostPurchase step, and
 * optionally allows data to be stored on the client for use in the `Render`
 * extension point.
 */
extend('Checkout::PostPurchase::ShouldRender', async ({storage}) => {
  const initialState = await getRenderData();
  const render = true;
  if (render) {
    // Saves initial state, provided to `Render` via `storage.initialData`
    await storage.update(initialState);
  }
  return {
    render,
  };
});

// Simulate results of network call, etc.
async function getRenderData() {
  return {
    couldBe: 'anything',
  };
}

/**
 * Entry point for the `Render` Extension Point
 *
 * Returns markup composed of remote UI components.  The Render extension can
 * optionally make use of data stored during `ShouldRender` extension point to
 * expedite time-to-first-meaningful-paint.
 */
render('Checkout::PostPurchase::Render', () =>
3

Did you guys ever get to the bottom of this?