I am using React, and I am calculating the distance/height of the div. But the values are different on the first render and rest of the renders of the component. The values coming in the second consecutive renders are correct but on the first time values are incorrect.

useEffect(() => {
      const footer = footerRef.current;
      const login = loginRef.current;

      if (!footer || !login) return;

      const windowHeight = window.screen.availHeight; // calculating the height of the screen
      const loginTop = login.offsetTop - login.scrollTop + login.clientTop // calculating the height of the div from the top
      const loginHeight = login.offsetHeight // calculating login div height
      const footerHeight = footer.clientHeight // calculating footer div height
  
      const calc = windowHeight - (loginTop + loginHeight + footerHeight) + 35;
      if (calc < 0) {
        // setting the position of the footer based on the calculation
        setCalcFooter(calc);
      }
  })

Values are different on first render and the rest.

windowHeight = 640px on both renders.
loginTop = first-render: 13px & second-render: 87px.
loginHeight = first-render: 489px & second-render: 515px.
footerHeight = first-render: 24px & second-render: 142px

<div>
   // code
   <div ref={loginRef}>
       // code
   </div>
   <div ref={footerRef} style={{ bottom: calcFooter }}> // here I am using that state variable 
      // code
   </div>
</div>

Is there any way, I can get the correct values in first render which I am getting in the second render of the component?