Code for `index.jsx` file for your Checkout UI Extension used in my video here: https://youtu.be/FDLoz__VKVk

index.jsx

import React from "react";
import {
  render,
  BlockStack,
  InlineStack,
  Text,
  View,
  Image,
  Heading,
  useAppMetafields,
} from "@shopify/checkout-ui-extensions-react";

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

function App() {
  const metafields = useAppMetafields({
    type: "shop",
    key: "review",
    namespace: "featured-review",
  });

  const featuredReview = metafields.length
    ? JSON.parse(metafields[0]?.metafield?.value)
    : null;

  if (featuredReview) {
    return (
      <BlockStack>
        <Heading>What customers are saying</Heading>
        <BlockStack
          border="base"
          padding="loose"
          spacing="tight"
          borderRadius="large"
        >
          <InlineStack blockAlignment="center" spacing="tight">
            <Heading level="3">{featuredReview.customerName}</Heading>
            <View maxInlineSize="15%" padding="extraTight">
              <Image
                fit="contain"
                source="https://res.cloudinary.com/dci7ukl75/image/upload/v1680446609/istockphoto-1140391316-612x612_vlgprt.png"
              />
            </View>
          </InlineStack>

          <Text>{featuredReview.reviewText}</Text>
        </BlockStack>
      </BlockStack>
    );
  }

  return null;
}