diff --git a/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-fields-block/frontend.tsx b/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-fields-block/frontend.tsx
index ad682af396e..9fd1dfe7c58 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-fields-block/frontend.tsx
+++ b/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-fields-block/frontend.tsx
@@ -3,6 +3,8 @@
  */
 import classnames from 'classnames';
 import { Main } from '@woocommerce/base-components/sidebar-layout';
+import { useStoreEvents } from '@woocommerce/base-context/hooks';
+import { useEffect } from '@wordpress/element';
 
 const FrontendBlock = ( {
 	children,
@@ -11,6 +13,14 @@ const FrontendBlock = ( {
 	children: JSX.Element;
 	className?: string;
 } ): JSX.Element => {
+	const { dispatchCheckoutEvent } = useStoreEvents();
+
+	// Ignore changes to dispatchCheckoutEvent callback so this is ran on first mount only.
+	useEffect( () => {
+		dispatchCheckoutEvent( 'render-checkout-form' );
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [] );
+
 	return (
 		<Main className={ classnames( 'wc-block-checkout__main', className ) }>
 			<form className="wc-block-components-form wc-block-checkout__form">