How to update map on zoom (georoam) in Echarts-for-React or simply Echarts

Question

I've been searching all over the internet and didn't find an answer. I am trying to make a map using Echarts for React. And I would like to update a map on zoom (georoam) to show smaller regions. For example on zoom=1 in will be provinces, on zoom=3 map will show regions and so on. The event listener georoam doesn't return correct current value of zoom. If I zoom in it returns 1.1, if i zoom out 0.9 only. So I was trying to calculate and set the zoom manually, but the map then doesnt work well, it zooms only into center and I cannot move it at all. So maybe you know some good solution for this. Below I paste the code of my function for georoam

const onGeoRoam = (params) => {
    if(params.zoom){
        if (params.zoom >= 1.1){
            setZoom(zoom+0.1)
        }else if(zoom >= 3 && params.zoom >= 1.1){
            setZoom(zoom+1)
        }else {
            setZoom(zoom-0.1)
        }

        if(zoom >= 2 && zoom < 3){
            setMap('regions')
        }else if(zoom >= 3 && zoom < 4){
            setMap('subregions')
        }else if(zoom >= 4 && zoom < 5){
            setMap('districts')
        }else if(zoom >= 5){
            setMap('municipalities')
        }else{
            setMap('provinces')
        }
    }

    setOption({
        tooltip: tooltip,
        series: [
            {
                name: "World PopEstimates",
                type: "map",
                roam: true,
                map: map,
                selectedMode: 'single',
                zoom: zoom,
                emphasis: emphasis,
                scaleLimit: {min: 1, max: 10},
                aspectScale: "1.1",
                itemStyle: itemStyle,
             },
        ],
    })
}

I will be very greatful for your help