I have this button that appears only when its text overflows its parent container. So far it works but when I go to refresh the page I get a typeerror of "Cannot read properties of undefined (reading 'clientHeight')."

I believe this is because my variable el hasn't finished pulling my data from my useRef. How can I check that my variable has passed in my data successfully before being rendered?

const inputRef = useRef<HTMLDivElement>()
const checkOverflowing = () => {
        const el = inputRef.current
        const isOverflowing = el.clientHeight < el.scrollHeight
        return isOverflowing
    }

return (
<div ref={inputRef} className="comment-for-user">{review.comments}</div>

            <div className="show-more-360">
                {checkOverflowing() &&
                    <button className="show-more-button" onClick={handleEvent}>...show More</button>}
            </div>)