【React】要素をサイズ変更時に再レンダリングする方法

以下のように記述すると要素のサイズが変更された際に再レンダリングされます。

// ...

export function Sample() {
    const ref = useRef(null)
    const [height, setHeight] = useState(0)
    
    useEffect(() => {
        const element = ref.current
        const observer = new ResizeObserver(() => {
             setHeight(element.offsetHeight)
        })
    
        if (element) {
             observer.observe(element)
        }
    
        return () => {
            if (element) {
                observer.unobserve(element)
            }
        }
    }, [])
    
    return <div ref={ref} />
}