ResizeObserver изменяет размер элемента только один раз

При нажатии кнопки я показываю диаграмму. При первом создании экземпляра диаграммы в родительском контейнере диаграммы устанавливается ResizeObserver. В моем приложении есть складная боковая панель, и когда я ее сворачиваю, диаграмма расширяется, как и ожидалось, заполняя дополнительное пространство. Однако, когда я снова открываю боковую панель, диаграмма не сжимается обратно.

Это стиль родительского контейнера (он вложен в другие гибкие элементы, так что, возможно, это часть проблемы?):

<div id = {"chartContainer"}
     style = {{
         width: "100%",
         height: "100%",
         border: "2px solid yellow",
     }}
/>

Это стиль диаграммы:

<div ref = {chartRef} style = {{ width: "100%", height: "80vh" }}></div>

Соответствующий код компонента ниже, но вот рабочий пример в песочнице кода . (Если у вас маленький экран, вам придется открыть коды и окно в полноэкранном режиме, чтобы увидеть все компоненты. Нажмите «Показать диаграмму», чтобы создать диаграмму, нажмите «X» в левом верхнем углу, чтобы свернуть боковую панель. и значок в том же месте, чтобы снова открыть его.)

export const Chart = () => {
  const chartRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    let chart: ECharts | undefined;
    if (chartRef.current !== null) {
      chart = init(chartRef.current, null, { renderer: "svg" });
    }

    const parentContainer: HTMLDivElement = document.querySelector("#chartContainer");
    
    new ResizeObserver(() => {
      chart.resize();
    }).observe(parentContainer);

    return () => {
      chart?.dispose();
    };
  }, []);

  useEffect(() => {
    //Update chart
    if (chartRef.current !== null) {
      const chart = getInstanceByDom(chartRef.current);
      chart?.setOption(option);
    }
  }, [option]);

  return <div ref = {chartRef} style = {{ width: "100%", height: "80vh" }}></div>;
};