Snipcart.api.cart.fetchShippingRates() - Not refreshing Rates

I have a set of custom Radio Buttons in my snip cart shipping rates. When changes the option that is selected, I want snipcart to call the “Snipcart.api.cart.fetchShippingRates()” method so that the shipping options that are displayed are refreshed based on my webhook.

This is what I have so far:

The radio buttons

<fieldset class="snipcart-form__set">
                <div class="snipcart-form__field">

                    <h1 class="snipcart-cart-summary__title snipcart__font--subtitle">Delivery or Collection</h1>

                    <hr class="snipcart-form__separator" />
                    <snipcart-radio @change.native="window.refreshDeliveryOptions()" name="deliveryType" value="DeliveryOrder">
                        I want my order to be deliverd.
                    <br />
                    <snipcart-radio @change.native="window.refreshDeliveryOptions()" name="deliveryType" value="CollectionOrder">
                        I will collect my order.


And this is the JS

document.addEventListener("snipcart.ready", () => {

window.refreshDeliveryOptions = async () => {
                try {
                    const response = await Snipcart.api.cart.fetchShippingRates();
                } catch (error) {

I know that my javascript is being called because I can see the output in the “testing” in the browser console.

However the rates are not being refreshed in the UI.

Snipcart is not calling the webhook (its not getting to my breakpoint in my backend code) and the response object that is output in to the console has not changed.

I have tried to do what Dominic advised in this post:

Maybe I have misunderstood how this works? can anyone give me an example of how to do this?