Ensure addresses sync correctly when loading the Checkout Shipping Address Block

assets/js/blocks/checkout/inner-blocks/checkout-shipping-address-block/block.tsx

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { useMemo, useEffect, Fragment } from '@wordpress/element';
+import { useMemo, useEffect, Fragment, useState } from '@wordpress/element';
 import { AddressForm } from '@woocommerce/base-components/cart-checkout';
 import {
 	useCheckoutAddress,
@@ -48,13 +48,29 @@ const Block = ( {
 	const { dispatchCheckoutEvent } = useStoreEvents();
 	const { isEditor } = useEditorContext();
 
+	// This is used to track whether the "Use shipping as billing" checkbox was checked on first load and if we synced
+	// the shipping address to the billing address if it was. This is not used on further toggles of the checkbox.
+	const [ addressesSynced, setAddressesSynced ] = useState( false );
+
 	// Clears data if fields are hidden.
 	useEffect( () => {
 		if ( ! showPhoneField ) {
 			setShippingPhone( '' );
 		}
 	}, [ showPhoneField, setShippingPhone ] );
 
+	// Run this on first render to ensure addresses sync if needed, there is no need to re-run this when toggling the
+	// checkbox.
+	useEffect( () => {
+		if ( addressesSynced ) {
+			return;
+		}
+		if ( useShippingAsBilling ) {
+			setBillingAddress( shippingAddress );
+		}
+		setAddressesSynced( true );
+	}, [ setBillingAddress, shippingAddress, useShippingAsBilling ] );
+
 	const addressFieldsConfig = useMemo( () => {
 		return {
 			company: {