Can't seem to validate address

[paulGeoghegan]

Describe the bug

For my website I need to validate that the state the person is selecting is available for delivery. The company only delivers to one state but they can have any state for billing.
I can't seem to find a way to access the state value as the user selects it.

		<Elements
			{stripe}
			{clientSecret}
			theme="flat"
			labels="floating"
			variables={{ colorPrimary: '#7c4dff' }}
			rules={{ '.Input': { border: 'solid 1px #0002' } }}
			bind:elements
		>
			<form on:submit|preventDefault={submit}>
				<LinkAuthenticationElement />
				<PaymentElement />
				{#if $cart.delivery}
					<h2>Shipping info</h2>
					<Address
						mode="shipping"
						fields={{ phone: 'always' }}
						validation={{ phone: { required: 'always' } }}
					/>
				{:else}
					<h2 class="mb-4 mt-8 text-lg font-bold text-gray-700 sm:text-xl">
						Billing info
					</h2>
					<Address
						mode="billing"
						fields={{ phone: 'always' }}
						validation={{ phone: { required: 'always' } }}
					/>
				{/if}
				<button
					class="mx-auto mt-8 block rounded bg-logoBackgroundBlue px-5 py-3 text-sm text-gray-100 transition hover:bg-logobackgroundBlueRgba focus:bg-logobackgroundBlueRgba disabled:cursor-not-allowed disabled:bg-gray-300"
					disabled={processing}
				>
					{#if processing}
						Processing...
					{:else}
						Pay €{total}
					{/if}
				</button>
			</form>
		</Elements>

I looked at the Stripe docs for listening to changes but that doesn't seem to translate well to svelte.

Reproduction

N/A
There isn't really a bug here I just need an example.

Severity

serious, but I can work around it

Additional Information

No response