function useResizeObserver(options) {
	const { ref, box = "content-box" } = options;
	const [{ width, height }, setSize] = useState(initialSize);
	const isMounted = useIsMounted();
	const previousSize = useRef({ ...initialSize });
	const onResize = useRef(void 0);
	onResize.current = options.onResize;
	const observerRef = useRef(null)
	const createResizeObserver = useCallback(() => {
		if (!ref.current)
			return;
		if (typeof window === "undefined" || !("ResizeObserver" in window))
			return;
		observerRef.current = new ResizeObserver(([entry]) => {
			const boxProp = box === "border-box" ? "borderBoxSize" : box === "device-pixel-content-box" ? "devicePixelContentBoxSize" : "contentBoxSize";
			const newWidth = extractSize(entry, boxProp, "inlineSize");
			const newHeight = extractSize(entry, boxProp, "blockSize");
			const hasChanged = previousSize.current.width !== newWidth || previousSize.current.height !== newHeight;
			if (hasChanged) {
				const newSize = { width: newWidth, height: newHeight };
				previousSize.current.width = newWidth;
				previousSize.current.height = newHeight;
				if (onResize.current) {
					onResize.current(newSize);
				} else {
					if (isMounted()) {
						setSize(newSize);
					}
				}
			}
		});
		observerRef.current.observe(ref.current, { box });
	}, [isMounted, observerRef, box, ref])

	const destroyResizeObserver = useCallback(() => {
		if (observerRef.current) {
			observerRef.current.disconnect();
			previousSize.current = initialSize;
			observerRef.current = null;
		}
	}, [observerRef])

	useEffect(() => {
		createResizeObserver()
		return () => {
			destroyResizeObserver()
		}
	}, [box, ref, isMounted]);

	return { width, height, createResizeObserver, destroyResizeObserver };  // Notice: here add  createResizeObserver, destroyResizeObserver 
}