在 React Hooks 中，如何保持 eCharts 的交互状态

Question

在react 组件A中使用echarts时，在echarts做了一些列交互之后，重新设置 A 组件的某个状态，导致组件A重新运行一遍。
问题：之前交互信息会随着组件运行一遍消失，比如放大、旋转等信息；

import { useState, useRef } from 'react';
function A() {
 const [street, setStreet] = useState(null);
 const chartRef = useRef(null);

 // ....
 // ... 当运行setStreet时，Echarts 交互信息丢失，图表被重新渲染
 return (
  <div>
   <Echarts ref={chartRef} />
  </div>
 );
}

请问各位有什么比较好的方法规避；