freeze.tsx

const Freeze: FC<{ freeze: boolean; children: ReactNode }> = ({
  freeze,
  children,
}) => {
  const outerRef = useRef<HTMLDivElement>(null);
  const ref = useRef<HTMLDivElement>(null);
  useLayoutEffect(() => {
    if (freeze) {
      outerRef.current!.appendChild(ref.current!);
    }
  }, [freeze]);
  return freeze ? (
    <div ref={outerRef} />
  ) : (
    // Key is needed to ensure React hydrates again.
    <div key="defrosted" ref={outerRef}>
      <div
        ref={(el) => {
          // Don't clear when it's removed, otherwise it will be gone before the
          // effect.
          if (el !== null) {
            ref.current = el;
          }
        }}
      >
        {children}
      </div>
    </div>
  );
};