universalTransition with grouped data

I have this code and it works perfectly. In it I show how I would like to make the transition, with the dots moving perfectly:

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.5.0/echarts.min.js"></script>
  <style>
    .chart {
      width: 700px;
      height: 430px;
      margin: 0 auto;
    }
  </style>
</head>

<button class='barBttn'>
Bar Chart
</button>

<button class='scatterBttn'>
Scatter Chart
</button>

  <div class="chart"></div>

  <script>
    
    function chartSystem () {
    
      return {
        'maleData': [
            ['x', 'y'],
            [150, 45], 
            [160, 50], 
            [170, 55], 
            [180, 60]
        ],
        'femaleData': [
            ['x', 'y'],
            [160, 65], 
            [170, 70], 
            [180, 75], 
            [190, 80]
        ],
        'barData': [
          ['title', 'values', 'itemGroupId'],
          ['Male', 56, 'male'],
          ['Female', 88, 'female']
        ]
      }
    
    }
    
    //
    let pullDataset = null;
    let pullData = null;
    
    function chartSend () {
      //
      const dfInit = chartSystem();
      //
      pullDataset = [
        {
          source: dfInit.maleData,
          sourceHeader: true
        },
        {
          source: dfInit.femaleData,
          sourceHeader: true
        },
        {
          source: dfInit.barData,
          sourceHeader: true
        }
      ]
      //
      pullData = [
        {
          data: dfInit.barData.slice(1).map(item => ({
            name: item[0],
            value: item[1],
            itemGrmoupId: item[2]
          }))
        }
      ]
    }
    
    chartSend();
    
    //
    const chartUse = echarts.init(document.getElementsByClassName("chart")[0]);
    
    // Configuração do scatter plot
function chartFrameSwitch0() {
  const xAxis0 = {
    scale: true
  };
  const yAxis0 = {
    scale: true
  };

  const series0 = {
    type: 'scatter',
    id: 'male',
    datasetIndex: 0,
    encode: {
      x: 0,
      y: 1
    },
    xAxisIndex: 0,
    yAxisIndex: 0,
    dataGroupId: 'male', // Consistência com o gráfico de barras
    universalTransition: {
      enabled: true,
      delay: function (idx, count) {
        return Math.random() * 400;
      }
    },
    itemStyle: { color: '#1e90ff' } // Cor para "Male"
  };

  const series1 = {
    type: 'scatter',
    id: 'female', // identifica a serie (serieKey)
    dataGroupId: 'female', // agrupa a serie
    datasetIndex: 1,
    encode: {
      x: 0,
      y: 1
    },
    xAxisIndex: 0,
    yAxisIndex: 0,
    universalTransition: {
      enabled: true,
      delay: function (idx, count) {
        return Math.random() * 400;
      }
    },
    itemStyle: { color: '#ff69b4' } // Cor para "Female"
  };

  const option = {
    dataset: [pullDataset[0], pullDataset[1]],
    xAxis: [xAxis0],
    yAxis: [yAxis0],
    series: [series0, series1]
  };

  chartUse.setOption(option, { replaceMerge: ['xAxis', 'yAxis', 'series'] });
}

function chartFrameSwitch1() {

  const xAxis0 = {
    type: 'category',
    scale: false
  };
  const yAxis0 = {
    type: 'value',
    scale: false
  };

  const series0 = {
    type: 'bar',
    datasetIndex: 0,
    encode: {
      x: 0,
      y: 1,
      itemGroupId: 2
    },
    itemStyle: {
      color: (params) => {
        const color = ['#1e90ff', '#ff69b4'];
        return color[params.dataIndex];
      }
    },
    universalTransition: {
      enabled: true,
      divideShape: 'split',
      seriesKey: ['male', 'female'], // Consistência com o scatter
      delay: function (idx, count) {
        return Math.random() * 400;
      }
    }
  };

  const option = {
    dataset: [pullDataset[2]],
    xAxis: [xAxis0],
    yAxis: [yAxis0],
    series: [series0]
  };

  chartUse.setOption(option, { replaceMerge: ['xAxis', 'yAxis', 'series'] });
}

chartFrameSwitch0();

    const scatterClick = document.getElementsByClassName('scatterBttn')[0];
    const barClick = document.getElementsByClassName('barBttn')[0];
    
    scatterClick.addEventListener('click', chartFrameSwitch0);
    barClick.addEventListener('click', chartFrameSwitch1);
    
  </script>

But instead of doing series.type: 'scatter' twice, I’d like to separate them with a group divider, as shown in chartSystem.genderData. I would like to pass the id and dataGroupId for each of the groups, without having to do two series type: 'scatter' for this. Is this possible? See that the transition I tried didn’t work, it doesn’t occur with the smoothed effect, as we saw in the first example provided.

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.5.0/echarts.min.js"></script>
  <style>
    .chart {
      width: 700px;
      height: 430px;
      margin: 0 auto;
    }
  </style>
</head>

<button class='barBttn'>Bar Chart</button>
<button class='scatterBttn'>Scatter Chart</button>

<div class="chart"></div>

<script>
  function chartSystem() {
    return {
      genderData: [
        ['x', 'y', 'dataGroupId'],
        [150, 45, 'male'],
        [160, 50, 'male'],
        [170, 55, 'male'],
        [180, 60, 'male'],
        [160, 65, 'female'],
        [170, 70, 'female'],
        [180, 75, 'female'],
        [190, 80, 'female']
      ],
      barData: [
        ['Title', 'values', 'itemGroupId'],
        ['Male', 56, 'male'],
        ['Female', 88, 'female']
      ]
    };
  }

  let pullDataset = null;
  let pullData = null;

  function chartSend() {
    const dfInit = chartSystem();

    // Definindo dataset consolidado
    pullDataset = [
      {
        source: dfInit.genderData,
        sourceHeader: true
      },
      {
        source: dfInit.barData,
        sourceHeader: true
      }
    ];

    // Preparando os dados para o gráfico de barras
    pullData = [
      {
        data: dfInit.barData.slice(1).map(item => ({
          name: item[0],
          value: item[1]
        }))
      }
    ];
  }

  chartSend();

  const chartUse = echarts.init(document.getElementsByClassName("chart")[0]);

  // Configuração do scatter plot com `groupId`
 // Configuração do scatter plot com `dataGroupId`
function chartFrameSwitch0() {
  const xAxis0 = {
    scale: true
  };
  const yAxis0 = {
    scale: true
  };

  const series0 = {
    type: 'scatter',
    datasetIndex: 0,
    encode: {
      x: 0, // Coluna 'x' no dataset
      y: 1, // Coluna 'y' no dataset
      id: 2,
      dataGroupId: 2 // Modificado para `dataGroupId`
    },
    universalTransition: {
      enabled: true,
      delay: function (idx, count) {
        return Math.random() * 400;
      }
    },
    itemStyle: {
      color: function (params) {
        // Cor dinâmica baseada no dataGroupId
        return params.data[2] === 'male' ? '#1e90ff' : '#ff69b4';
      }
    }
  };

  const option = {
    dataset: [pullDataset[0]], // Dataset consolidado
    xAxis: [xAxis0],
    yAxis: [yAxis0],
    series: [series0]
  };

  chartUse.setOption(option, { replaceMerge: ['xAxis', 'yAxis', 'series'] });
}

  // Configuração do gráfico de barras
  function chartFrameSwitch1() {
    const xAxis0 = {
      type: 'category'
    };
    const yAxis0 = {
      type: 'value'
    };

    const series0 = {
      type: 'bar',
      datasetIndex: 0,
      encode: {
        x: 0,
        y: 1,
        itemGroupId: 2
      },
      itemStyle: {
        color: function (params) {
          const colors = ['#1e90ff', '#ff69b4'];
          return colors[params.dataIndex];
        }
      },
      universalTransition: {
        enabled: true,
        divideShape: 'split',
        seriesKey: ['male', 'female'],
        delay: function (idx, count) {
          return Math.random() * 400;
        }
      }
    };

    const option = {
      dataset: [pullDataset[1]],
      xAxis: [xAxis0],
      yAxis: [yAxis0],
      series: [series0]
    };

    chartUse.setOption(option, { replaceMerge: ['xAxis', 'yAxis', 'series'] });
  }

  // Inicializando o scatter plot
  chartFrameSwitch0();

  // Botões para alternar entre gráficos
  const scatterClick = document.getElementsByClassName('scatterBttn')[0];
  const barClick = document.getElementsByClassName('barBttn')[0];

  scatterClick.addEventListener('click', chartFrameSwitch0);
  barClick.addEventListener('click', chartFrameSwitch1);
</script>

How to make this adjustment?