Morphing map bubble size on update in highcharts maps

I have a map with a bubble on it (simplified example):

On click of a button, I want the bubble to do 3 things:

• Change size
• Change colour
• Morph between states nicely (i.e. transition)

It currently morphs colour nicely but does not change size at all. When I can get it to change size, it doesn’t do it smoothly (it goes directly from one state to the other, no morphing).

How do I get size to morph nicely in addition to colour?

Live example here: https://codepen.io/n93/pen/ExqpgLR

Reproducible code:

HTML

<script src="https://code.highcharts.com/maps/highmaps.js"></script>
<script src="https://code.highcharts.com/maps/modules/exporting.js"></script>
<script src="https://code.highcharts.com/maps/modules/offline-exporting.js"></script>
<script src="https://code.highcharts.com/maps/modules/accessibility.js"></script>
<script src="https://code.highcharts.com/maps/modules/accessibility.js"></script>
<script src="https://code.highcharts.com/maps/modules/tiledwebmap.js"></script>

<div id="container"></div>
<button id="change-size-button">
Change the bubble size
</button>

JS

var map;
map = Highcharts.mapChart("container", {
  mapNavigation: {
    enabled: true,
    buttonOptions: {
      alignTo: "spacingBox",
    },
  },

  mapView: {
    projection: {
      name: "WebMercator",
    },
    center: [152.9993, -27.41962],
    zoom: 10,
  },
  series: [
    {
      type: "tiledwebmap",
      name: "Tiles",
      provider: {
        type: "OpenStreetMap",
        theme: "Standard",
        subdomain: "a",
      },
      opacity: 0.5,
    },
    {
      type: "mapbubble",
      
      minSize: 20,
      maxSize: 100,
      data: [
        {
        name: "New series",
          lat: -27.451,
          lon: 153.0117,
          z: 30,
          color: "#F00011",
        },
      ],
    },
  ],
})

document
  .getElementById("change-size-button")
  .addEventListener("click", function () {
    map.series[1].data.forEach((point) => {
      point.update({
        // This works correctly
            name: "Updated series",
        color: "#080CAB",
        // This does not
        z: 40,
      })
    })
  })