getBoundingClientRect in list of dynamic elements returns random wrong values

Question

I have a component that renders a dynamic list of elements. I need to know the size of each element after it is rendered, for animation purposes. So I create dynamic array of refs:

const questionRefs = useRef<HTMLDivElement[]>([])

In return, I fill the array with values. Custom component of course uses forwardRef:

...
<QuestionnaireItem
  ref={(el: HTMLDivElement) => (questionRefs.current[i] = el)}
/>
...

But then when in useEffect or useLayoutEffect when I try to get ref sizes with getBoundingClientRect it returns me some values that are not true, for example 43px instead of 32px. Such a filling that it measures the size before the CSS is applied.

How do I get the actual element sizes?