React：Cytoscape.js の図をじんわり更新する

import React, { FC, useRef, useEffect } from 'react';
import cytoscape, { Core, ElementDefinition, Stylesheet, } from 'cytoscape';

const Child: FC<{
  Elements?: ElementDefinition[],
  Styles?: Stylesheet[],
}> = ({
  Elements = undefined,
  Styles = undefined,
}) => {
    const refEl = useRef(null);
    const refCy = useRef<Core | null>(null);

    useEffect(() => {
      const container = refEl.current! as HTMLDivElement;
      refCy.current = cytoscape({
        container: container,
        elements: Elements,
        style: Styles,
      });
      const cy = refCy.current;
      return (() => {
        cy.destroy();
      })
    }, []);

    useEffect(() => {
      const cy = refCy.current;
      cy?.json({ elements: Elements, styles: Styles });
      cy?.nodes('[type]').style({ opacity: 0.2 });
      cy?.nodes('[type]').animate({ style: { opacity: 1 }, duration: 1000 });
    }, [Elements, Styles]);

    return (
      <div ref={refEl} style={{ width: '300px', height: '200px' }}></div>
    );
  }

export default Child;