How to use the framesync.render function in framesync

function setValue(key: string, value: any) {
    if (key.startsWith('--')) {
      props.hasCSSVariable = true;
    }
    const currentValue = state[key];
    state[key] = value;

    if (state[key] === currentValue) return;

    if (changedValues.indexOf(key) === -1) {
      changedValues.push(key);
    }

    if (!hasChanged) {
      hasChanged = true;
      sync.render(styler.render);
    }
  }

if (immediate) {
    styleEl();
  } else {
    sync.render(styleEl);
  }
  const firstChild = el.children[0] as HTMLElement;
  if (firstChild) {
    const styleChild = () => {
      firstChild.style.transform = isFinished
        ? ''
        : `scaleX(${1 / scaleX}) scaleY(${1 / scaleY})`;
    };
    if (immediate) {
      styleChild();
    } else {
      sync.render(styleChild);
    }
  }
};

const applyCoordTransform = (
  el: HTMLElement,
  { translateX, translateY, scaleX, scaleY }: Coords,
  { immediate }: { immediate?: boolean } = {}
): void => {
  const isFinished =
    translateX === 0 && translateY === 0 && scaleX === 1 && scaleY === 1;
  const styleEl = () => {
    el.style.transform = isFinished
      ? ''
      : `translateX(${translateX}px) translateY(${translateY}px) scaleX(${scaleX}) scaleY(${scaleY})`;
  };
  if (immediate) {
    styleEl();
  } else {
    sync.render(styleEl);
  }
  const firstChild = el.children[0] as HTMLElement;
  if (firstChild) {
    const styleChild = () => {
      firstChild.style.transform = isFinished
        ? ''
        : `scaleX(${1 / scaleX}) scaleY(${1 / scaleY})`;
    };
    if (immediate) {
      styleChild();
    } else {
      sync.render(styleChild);
    }
  }
};