function useResizeObserver(
  ref: React.RefObject<HTMLDivElement>,
  onResize: (entry: ResizeObserverEntry) => void
) {
  const observer = useRef<ResizeObserver>(null);

  useEffect(() => {
    if (ref.current) {
      observer.current?.disconnect();
      observer.current = new ResizeObserver((entries) => {
        for (const entry of entries) {
          onResize(entry);
        }
      });
      observer.current.observe(ref.current);
    }

    return () => {
      observer.current.disconnect();
    };
  }, [ref.current, onResize]);
}