measureElement returning zeros

[dustinlacewell]

I have a relatively simple ScrollArea component that is displaying a scrollable log.

Whenever the buffer length changes, I'd like to recompute the height of the container. However, it always returns 0.

export const ScrollArea: FC = ({ children }) => {
    const {
        height, buffer,
        innerHeight, setInnerHeight,
        marginTop,
        scroll, setScroll
    } = useStore()

    const innerRef = useRef();

    useEffect(() => {
        const dimensions = measureElement(innerRef.current);
        setInnerHeight(dimensions.height)
        writeFileSync('log.txt', `New height: ${dimensions.height}`, { flag: 'a'})
    }, [buffer.length]);


    useInput((i, k) => {
        const max = innerHeight - height

        if (k.downArrow) {
            setScroll(Math.max(0, scroll - 1))
        }
        if (k.upArrow) {
            setScroll(Math.min(max, scroll + 1))
        }
    })

    return (
        <Box height={height - 1} flexDirection="column" overflow="hidden">
            <Box
                ref={innerRef}
                flexShrink={0}
                flexDirection="column"
                marginTop={marginTop}
            >
                {
                    buffer.toString('utf8').split("\r\n").map((s, i) => <Text key={i}>{s}</Text>)
                }
            </Box>            
        </Box>
    );
}

Any advice would be appreciated.