[Bug] Error for visualizing custom svg floorplan in React

Version

5.4.2

I use echarts to visualize a custom svg map. However, for every first npm start, it will always return error at Cannot read properties of undefined (reading 'regions') But when I re-compile in vscode (just simply press ctrl + s), the website will refresh and successfully get the output.

Please help to out for this issue which has been bordered me for a long time! also kindly refer to the source code and svg file for your review. thanks.

Current Behavior

Got Error at Cannot read properties of undefined (reading 'regions')

Expected Behavior

Can show the output without error

souce code

import React, { useRef, useEffect } from "react"; import * as echarts from "echarts"; import mapData from "./map.svg";

export default function Heatmap(){ const ref = useRef(null); let mapInstance = null;

const option = {
    tooltip: {},
    visualMap: {
    left: 'center',
    bottom: '10%',
    min: 5,
    max: 100,
    orient: 'horizontal',
    text: ['', 'Price'],
    realtime: true,
    calculable: true,
    inRange: {
        color: ['#dbac00', '#db6e00', '#cf0000']
        }
    },
series: [
  {
    name: 'French Beef Cuts',
    type: 'map',
    map: 'testing',
    roam: true,
    emphasis: {
      label: {
        show: false
      }
    },
    selectedMode: false,
    data: [
      { name: 'Queue', value: 15 },
      { name: 'Langue', value: 35 },
      { name: 'Plat de joue', value: 15 },
      { name: 'Gros bout de poitrine', value: 25 },
      { name: 'Jumeau à pot-au-feu', value: 45 },
      { name: 'Onglet', value: 85 },
      { name: 'Plat de tranche', value: 25 },
      { name: 'Araignée', value: 15 },
      { name: 'Gîte à la noix', value: 55 },
      { name: "Bavette d'aloyau", value: 25 },
      { name: 'Tende de tranche', value: 65 },
      { name: 'Rond de gîte', value: 45 },
      { name: 'Bavettede de flanchet', value: 85 },
      { name: 'Flanchet', value: 35 },
      { name: 'Hampe', value: 75 },
      { name: 'Plat de côtes', value: 65 },
      { name: 'Tendron Milieu de poitrine', value: 65 },
      { name: 'Macreuse à pot-au-feu', value: 85 },
      { name: 'Rumsteck', value: 75 },
      { name: 'Faux-filet', value: 65 },
      { name: 'Côtes Entrecôtes', value: 55 },
      { name: 'Basses côtes', value: 45 },
      { name: 'Collier', value: 85 },
      { name: 'Jumeau à biftek', value: 15 },
      { name: 'Paleron', value: 65 },
      { name: 'Macreuse à bifteck', value: 45 },
      { name: 'Gîte', value: 85 },
      { name: 'Aiguillette baronne', value: 65 },
      { name: 'Filet', value: 95 }
    ]
  }
]
}

const renderMap = (myChart) => {
    /*const renderedMapInstance = echarts.getInstanceByDom(ref.current);
    if (renderedMapInstance) {
      mapInstance = renderedMapInstance;
    } else {
      mapInstance = echarts.init(ref.current);
    }
    mapInstance.setOption(option);*/
    myChart.setOption(option)
  };

  useEffect(() => {
    fetch(mapData)
      .then((response) => response.text())
      .then((svgText) => {
        echarts.registerMap("testing", { svg: svgText });
      });

    var chartDom = document.getElementById('beef');
    var myChart = echarts.init(chartDom);

    renderMap(myChart);
  }, []);
/*
  useEffect(() => {
    window.onresize = function () {
    };
    return () => {
      mapInstance && mapInstance.dispose();
    };
  }, []);  mapInstance.resize();

*/
  return (
    <div>
      <div style={{ width: "100%", height: "50vh" }} ref={ref} id='beef'></div>
    </div>
  );

}

svg file

                <svg
                              xmlns="http://www.w3.org/2000/svg"
                              width="591"
                              height="373"
                              preserveAspectRatio="xMidYMid meet"
                              viewBox="0 0 376 237"
                            >
                              <g transform="translate(-7.69,10.06)">

            <path

              d="m 536.375,106.46875 c 5.2885,14.34201 10.52945,33.1769 13.78125,43.21875 -0.0655,0.0771 -0.13181,0.1476 -0.21875,0.21875 l 16.5625,0.9375 10.5,-8.5 11,-17 -13.5,-18 -38.125,-0.875 z"
              stroke="#A5A5A5" 
              stroke-width="0.75"
              stroke-linecap="round"
              fill="#FFFFFF"
              fill-rule="evenodd"
              id="path3702"
              name="Langue" 
              transform="matrix(0.6362812,0,0,0.6362812,7.6936433,-10.065285)"
            />

            </g>  
        </svg>

apache / echarts