I can't merge cells in handsontable 12.4 version, I'm using Umi 4

Question

Here are my steps:

First I introduced Handsontable 12.4 and @handsontable/react 12.4 packages in package.json:

"handsontable": "^12.4.0",
"@handsontable/react": "^12.4.0",
"@umijs/max": "^4.0.71",
...

Then register the handsontable module in src/global.ts：

import Handsontable from 'handsontable/base';
import { registerAllModules } from 'handsontable/registry';

registerAllModules();
...

We then introduce the handsontable style in src/global.less：

@import 'handsontable/dist/handsontable.full.min.css';
...

最后在页面中写入内容：

import { HotTable } from '@handsontable/react';
import { Button, Row } from 'antd';
import Handsontable from 'handsontable/base';
import React, { useEffect, useRef } from 'react';

import {
  exportAntdProSimpleTableToExcel,
  exportArrayDataToExcel,
  exportHansonToExcel,
} from '@/utils/xlsxUtils';

const RealTimeTrend: React.FC = () => {
  const hotRef = useRef<HotTable>(null);

  useEffect(() => {});

  const handleClick = () => {
    // exportHansonToExcel(hotRef);
    // exportArrayDataToExcel(hotRef.current?.hotInstance?.getData() as string[][]);
    // type User = {
    //   id?: string;
    //   name?: string;
    //   gender?: number;
    // };
    // const columns: ProColumns<User>[] = [
    //   {
    //     title: 'ID',
    //     dataIndex: 'id',
    //     hideInTable: true,
    //   },
    //   {
    //     title: '姓名',
    //     dataIndex: 'name',
    //   },
    //   {
    //     title: '性别',
    //     dataIndex: 'gender',
    //     render: (text: React.ReactNode) => (text === 0 ? '男' : '女'),
    //   },
    // ];
    // const data: User[] = [
    //   {
    //     id: '1',
    //     name: '张三',
    //     gender: 0,
    //   },
    //   {
    //     id: '2',
    //     name: '李四',
    //     gender: 1,
    //   },
    //   {
    //     id: '3',
    //     name: '王五',
    //     gender: 0,
    //   },
    // ];
    // exportAntdProSimpleTableToExcel(data, columns);
  };

  return (
    <>
      <HotTable
        ref={hotRef}
        data={[
          ['test', '', '', ''],
          [10, 11, 12, 13],
          [20, 11, 14, 13],
          [30, 15, 12, 13],
        ]}
        rowHeaders={true}
        rowHeaderWidth={0}
        colHeaders={false}
        height="auto"
        mergeCells={[{ row: 0, col: 0, rowspan: 1, colspan: 4 }]}
        cells={(row, col) => {
          const cellProperties = { className: 'handson-align' };

          if (row === 0 && col === 0) {
            cellProperties.className += ' handson-bold';
          }

          return cellProperties;
        }}
        licenseKey="non-commercial-and-evaluation"
      />
      <Button onClick={handleClick} type="primary" className="mt-10px">
        导出数据
      </Button>
    </>
  );
};

But mergeCells is not work ,
enter image description here
And:

useEffect(() => {
    const plugin = hotRef.current?.hotInstance?.getPlugin('mergeCells');
    console.log(plugin); // undefined
  });

Howw should I do?

I tried using handsontable 12.4 on a new project (also Umi 4 project), but I still couldn't merge the cells