Javascript 更新边界时，React mapbox gl将保持刷新

我有两个组件，一个是显示地图（地图组件），另一个是一个表单，它有一个输入字段来搜索一个国家和该国家的其他数据（信息组件）。我想要的功能是，每当我在地图中单击一个国家时，它会自动缩放到地图组件中的国家，我会在信息组件中获取信息，如果我在信息组件中搜索一个国家，它会显示在地图组件中。现在我可以做所有这些，但是每次我在地图组件中点击一个国家，或者在表单组件中搜索一个国家，地图就会被重新渲染。我希望每次单击国家/搜索国家时，它都能在地图上生成平滑的动画，但我不知道如何进行

这是我的地图组件

import React,{useState,useRef,useEffect,createRef} from 'react';
import './sideMap.css'
import {useCountryState,useCountryFromCordiantes} from '../../../redux/hooks'
import mapboxgl from 'mapbox-gl'

const SideMap = () => {
        const state = useCountryState()
        const mapContainerRef = useRef(null);
        const[cordinates,setCordinates]=useState()
        useCountryFromCordiantes(cordinates)
        
        useEffect(()=> {
            const map = new mapboxgl.Map({
            container: mapContainerRef.current,
            style: 'mapbox://styles/pablvvera/ckg6xppv92qti19pnr73y72ie'
            })
            
            if(state != undefined)
                    if(state.Country !== "world")
                            map.fitBounds(state.geolocation.bbox)
                           
                    else
                    map.zoomTo(1)
            map.on('click',(e)=>{
                    setCordinates(e.lngLat)
            })
            
        },[])
       
        
        return ( 
                 <div className="newViewport">
                        <div className="mapContainer" ref={mapContainerRef}></div>    
                </div>
        );
 }
     
    export default SideMap;`

import React，{useState，useRef，useffect，createRef}来自'React'；
导入“./sideMap.css”
从“../../../redux/hooks”导入{UseConomryState，UseConomryFromCordiantes}
从“mapbox gl”导入mapboxgl
常量侧图=（）=>{
const state=useConomryState（）
const mapContainerRef=useRef（null）；
const[cordinates，setCordinates]=useState（）
使用cordinates（cordinates）
useffect（（）=>{
常量映射=新的mapboxgl.map({
容器：mapContainerRef.current，
风格：'mapbox://styles/pablvvera/ckg6xppv92qti19pnr73y72ie'
})
如果（状态！=未定义）
如果（state.Country！=“世界”）
map.fitBounds（state.geolocation.bbox）
其他的
地图zoomTo（1）
地图上（'点击'，（e）=>{
塞科迪酸盐（e.lngLat）
})
},[])
报税表（
);
}
导出默认侧图`

如果没有最简单的功能示例，很难为您提供帮助。尝试在CodeSandbox中复制它。