Shopify Checkout UI Extension not Showing in Customizer

I have created a custom checkout UI extension that is set up to be a dynamic render checkout UI extension. When testing, I am able to get the custom UI to render on the checkout page, but the app does not show in the checkout customizer page in the admin. I also tried to deploy a boilerplate banner sample checkout UI from the docs, but had the same issue. Here is my code:

import {
  render,
  Text,
  Image,
  View,
  Grid,
  Style,
} from '@shopify/checkout-ui-extensions-react';

render('Checkout::Dynamic::Render', () => <App />);

function App() {
  return (
    <Grid
      columns={Style.default(['20%', 'fill', 0, 0, 0, 0]).when({viewportInlineSize: {min: 'small'}}, [
        '15%',
        'fill',
        '15%',
        'fill',
        '15%',
        'fill'
      ])}
      rows={['auto', 'auto']}
      overflow='hidden'
      border='base'
      blockAlignment='center'
      maxBlockSize={90}
    >
      <View padding="base">
        <Image source="https://cdn.shopify.com/s/files/1/0760/4994/0756/files/Checkout_icons-02.png" />
      </View>
      <View padding="base">
        <Text size="extraSmall">Message 1.</Text>
      </View>
      <View padding="base">
        <Image source="https://cdn.shopify.com/s/files/1/0760/4994/0756/files/Checkout_icons-01.png" />
      </View>
      <View padding="base">
        <Text size="extraSmall">Message 2.</Text>
      </View>
      <View padding="base">
        <Image source="https://cdn.shopify.com/s/files/1/0760/4994/0756/files/Checkout_icons-03.png" />
      </View>
      <View padding="base">
        <Text size="extraSmall">Message 3.</Text>
      </View>
    </Grid>
  );
}